<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1595069" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon bbfont">&#xe6f8;</span>
                <div class="name">history</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe6f6;</span>
                <div class="name">editor</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe6f9;</span>
                <div class="name">data</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe6fa;</span>
                <div class="name">gift</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe6fb;</span>
                <div class="name">integral</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe6fd;</span>
                <div class="name">nav-list</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe6ff;</span>
                <div class="name">pic</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe6fe;</span>
                <div class="name">Not visible</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe701;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe703;</span>
                <div class="name">rising</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe704;</span>
                <div class="name">QRcode</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe705;</span>
                <div class="name">rmb</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe707;</span>
                <div class="name">similar-product</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe702;</span>
                <div class="name">export services</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe70d;</span>
                <div class="name">send inquiry</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe718;</span>
                <div class="name">all-fill</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe721;</span>
                <div class="name">favorites-fill</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe726;</span>
                <div class="name">integral-fill</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe72a;</span>
                <div class="name">namecard-fill</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe72e;</span>
                <div class="name">pic-fill</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe72f;</span>
                <div class="name">play-fill</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe730;</span>
                <div class="name">prompt-fill</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe738;</span>
                <div class="name">stop-fill</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe741;</span>
                <div class="name">3column</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe742;</span>
                <div class="name">add-account</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe743;</span>
                <div class="name">4column</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe744;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe745;</span>
                <div class="name">agriculture</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe746;</span>
                <div class="name">2years</div>
                <div class="code-name">&amp;#xe746;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe747;</span>
                <div class="name">add-cart</div>
                <div class="code-name">&amp;#xe747;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe748;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe749;</span>
                <div class="name">arrow-lift</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe74a;</span>
                <div class="name">apparel</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe74b;</span>
                <div class="name">all</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe74c;</span>
                <div class="name">arrow-up</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe74d;</span>
                <div class="name">ascending</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe74e;</span>
                <div class="name">ashbin</div>
                <div class="code-name">&amp;#xe74e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe74f;</span>
                <div class="name">atm</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe750;</span>
                <div class="name">bad</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe751;</span>
                <div class="name">attachent</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe752;</span>
                <div class="name">browse</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe753;</span>
                <div class="name">beauty</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe754;</span>
                <div class="name">atm-away</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe755;</span>
                <div class="name">assessed-badge</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe756;</span>
                <div class="name">auto</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe757;</span>
                <div class="name">bags</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe758;</span>
                <div class="name">calendar</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe759;</span>
                <div class="name">cart- full</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe75a;</span>
                <div class="name">calculator</div>
                <div class="code-name">&amp;#xe75a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe75b;</span>
                <div class="name">camera switching</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe75c;</span>
                <div class="name">cecurity-protection</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe75d;</span>
                <div class="name">category</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe75e;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe75f;</span>
                <div class="name">certified-supplier</div>
                <div class="code-name">&amp;#xe75f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe760;</span>
                <div class="name">cart-Empty</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe761;</span>
                <div class="name">code</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe762;</span>
                <div class="name">color</div>
                <div class="code-name">&amp;#xe762;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe763;</span>
                <div class="name">conditions</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe764;</span>
                <div class="name">confirm</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe765;</span>
                <div class="name">company</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe766;</span>
                <div class="name">ali-clould</div>
                <div class="code-name">&amp;#xe766;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe767;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe768;</span>
                <div class="name">credit-level</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe769;</span>
                <div class="name">coupons</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe76a;</span>
                <div class="name">connections</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe76b;</span>
                <div class="name">cry</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe76c;</span>
                <div class="name">costoms-alearance</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe76d;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe76e;</span>
                <div class="name">Currency Converter</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe76f;</span>
                <div class="name">cut</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe770;</span>
                <div class="name">data</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe771;</span>
                <div class="name">Customer management</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe772;</span>
                <div class="name">descending</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe773;</span>
                <div class="name">double-arro- right</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe774;</span>
                <div class="name">customization</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe775;</span>
                <div class="name">double-arrow-left</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe776;</span>
                <div class="name">discount</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe777;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe778;</span>
                <div class="name">dollar</div>
                <div class="code-name">&amp;#xe778;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe779;</span>
                <div class="name">default-template</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe77a;</span>
                <div class="name">editor</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe77b;</span>
                <div class="name">eletrical</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe77c;</span>
                <div class="name">electronics</div>
                <div class="code-name">&amp;#xe77c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe77d;</span>
                <div class="name">etrical-equipm</div>
                <div class="code-name">&amp;#xe77d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe77e;</span>
                <div class="name">ellipsis</div>
                <div class="code-name">&amp;#xe77e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe77f;</span>
                <div class="name">email</div>
                <div class="code-name">&amp;#xe77f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe780;</span>
                <div class="name">falling</div>
                <div class="code-name">&amp;#xe780;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe781;</span>
                <div class="name">earth</div>
                <div class="code-name">&amp;#xe781;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe782;</span>
                <div class="name">filter</div>
                <div class="code-name">&amp;#xe782;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe783;</span>
                <div class="name">furniture</div>
                <div class="code-name">&amp;#xe783;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe784;</span>
                <div class="name">folder</div>
                <div class="code-name">&amp;#xe784;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe785;</span>
                <div class="name">feeds</div>
                <div class="code-name">&amp;#xe785;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe786;</span>
                <div class="name">history</div>
                <div class="code-name">&amp;#xe786;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe787;</span>
                <div class="name">hardware</div>
                <div class="code-name">&amp;#xe787;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe788;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe788;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe789;</span>
                <div class="name">good</div>
                <div class="code-name">&amp;#xe789;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe78a;</span>
                <div class="name">Household appliances</div>
                <div class="code-name">&amp;#xe78a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe78b;</span>
                <div class="name">gift</div>
                <div class="code-name">&amp;#xe78b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe78c;</span>
                <div class="name">form</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe78d;</span>
                <div class="name">image-text</div>
                <div class="code-name">&amp;#xe78d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe78e;</span>
                <div class="name">hot</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe78f;</span>
                <div class="name">inspection</div>
                <div class="code-name">&amp;#xe78f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe790;</span>
                <div class="name">left button</div>
                <div class="code-name">&amp;#xe790;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe791;</span>
                <div class="name">jewelry</div>
                <div class="code-name">&amp;#xe791;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe792;</span>
                <div class="name">ipad</div>
                <div class="code-name">&amp;#xe792;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe793;</span>
                <div class="name">left arrow</div>
                <div class="code-name">&amp;#xe793;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe794;</span>
                <div class="name">integral</div>
                <div class="code-name">&amp;#xe794;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe795;</span>
                <div class="name">kitchen</div>
                <div class="code-name">&amp;#xe795;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe796;</span>
                <div class="name">inquiry-template</div>
                <div class="code-name">&amp;#xe796;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe797;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe797;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe798;</span>
                <div class="name">libra</div>
                <div class="code-name">&amp;#xe798;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe799;</span>
                <div class="name">loading</div>
                <div class="code-name">&amp;#xe799;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe79a;</span>
                <div class="name">listing-content</div>
                <div class="code-name">&amp;#xe79a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe79b;</span>
                <div class="name">lights</div>
                <div class="code-name">&amp;#xe79b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe79c;</span>
                <div class="name">logistics-icon</div>
                <div class="code-name">&amp;#xe79c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe79d;</span>
                <div class="name">message center</div>
                <div class="code-name">&amp;#xe79d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe79e;</span>
                <div class="name">mobile-phone</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe79f;</span>
                <div class="name">manage-order</div>
                <div class="code-name">&amp;#xe79f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7a0;</span>
                <div class="name">move</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7a1;</span>
                <div class="name">Money management</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7a2;</span>
                <div class="name">namecard</div>
                <div class="code-name">&amp;#xe7a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7a3;</span>
                <div class="name">map</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7a4;</span>
                <div class="name">New user zone</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7a5;</span>
                <div class="name">multi-language</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7a6;</span>
                <div class="name">office</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7a7;</span>
                <div class="name">notice</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7a8;</span>
                <div class="name">on time shipment</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7a9;</span>
                <div class="name">office-supplies</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7aa;</span>
                <div class="name">password</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ab;</span>
                <div class="name">Not visible</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ac;</span>
                <div class="name">operation</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ad;</span>
                <div class="name">packaging</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ae;</span>
                <div class="name">online-tracking</div>
                <div class="code-name">&amp;#xe7ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7af;</span>
                <div class="name">packing-labeling</div>
                <div class="code-name">&amp;#xe7af;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7b0;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7b1;</span>
                <div class="name">pic</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7b2;</span>
                <div class="name">pin</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7b3;</span>
                <div class="name">play</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7b4;</span>
                <div class="name">logistic-logo</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7b5;</span>
                <div class="name">print</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7b6;</span>
                <div class="name">product</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7b7;</span>
                <div class="name">machinery</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7b8;</span>
                <div class="name">process</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7b9;</span>
                <div class="name">prompt</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ba;</span>
                <div class="name">QRcode</div>
                <div class="code-name">&amp;#xe7ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7bb;</span>
                <div class="name">reeor</div>
                <div class="code-name">&amp;#xe7bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7bc;</span>
                <div class="name">reduce</div>
                <div class="code-name">&amp;#xe7bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7bd;</span>
                <div class="name">Non-staple food</div>
                <div class="code-name">&amp;#xe7bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7be;</span>
                <div class="name">rejected-order</div>
                <div class="code-name">&amp;#xe7be;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7bf;</span>
                <div class="name">resonse rate</div>
                <div class="code-name">&amp;#xe7bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7c0;</span>
                <div class="name">remind</div>
                <div class="code-name">&amp;#xe7c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7c1;</span>
                <div class="name">response time</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7c2;</span>
                <div class="name">return</div>
                <div class="code-name">&amp;#xe7c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7c3;</span>
                <div class="name">paylater</div>
                <div class="code-name">&amp;#xe7c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7c4;</span>
                <div class="name">rising</div>
                <div class="code-name">&amp;#xe7c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7c5;</span>
                <div class="name">Right arrow</div>
                <div class="code-name">&amp;#xe7c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7c6;</span>
                <div class="name">rmb</div>
                <div class="code-name">&amp;#xe7c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7c7;</span>
                <div class="name">RFQ-logo</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7c8;</span>
                <div class="name">save</div>
                <div class="code-name">&amp;#xe7c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7c9;</span>
                <div class="name">scanning</div>
                <div class="code-name">&amp;#xe7c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ca;</span>
                <div class="name">security</div>
                <div class="code-name">&amp;#xe7ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7cb;</span>
                <div class="name">sales center</div>
                <div class="code-name">&amp;#xe7cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7cc;</span>
                <div class="name">seleted</div>
                <div class="code-name">&amp;#xe7cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7cd;</span>
                <div class="name">search cart</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ce;</span>
                <div class="name">raw</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7cf;</span>
                <div class="name">service</div>
                <div class="code-name">&amp;#xe7cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7d0;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe7d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7d1;</span>
                <div class="name">signboard</div>
                <div class="code-name">&amp;#xe7d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7d2;</span>
                <div class="name">shuffling-banner</div>
                <div class="code-name">&amp;#xe7d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7d3;</span>
                <div class="name">Right button</div>
                <div class="code-name">&amp;#xe7d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7d4;</span>
                <div class="name">sorting</div>
                <div class="code-name">&amp;#xe7d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7d5;</span>
                <div class="name">sound-Mute</div>
                <div class="code-name">&amp;#xe7d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7d6;</span>
                <div class="name">category products</div>
                <div class="code-name">&amp;#xe7d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7d7;</span>
                <div class="name">sound-filling</div>
                <div class="code-name">&amp;#xe7d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7d8;</span>
                <div class="name">suggest</div>
                <div class="code-name">&amp;#xe7d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7d9;</span>
                <div class="name">stop</div>
                <div class="code-name">&amp;#xe7d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7da;</span>
                <div class="name">success</div>
                <div class="code-name">&amp;#xe7da;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7db;</span>
                <div class="name">supplier-features</div>
                <div class="code-name">&amp;#xe7db;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7dc;</span>
                <div class="name">switch</div>
                <div class="code-name">&amp;#xe7dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7dd;</span>
                <div class="name">survey</div>
                <div class="code-name">&amp;#xe7dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7de;</span>
                <div class="name">template</div>
                <div class="code-name">&amp;#xe7de;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7df;</span>
                <div class="name">text</div>
                <div class="code-name">&amp;#xe7df;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7e0;</span>
                <div class="name">suspended</div>
                <div class="code-name">&amp;#xe7e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7e1;</span>
                <div class="name">task-management</div>
                <div class="code-name">&amp;#xe7e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7e2;</span>
                <div class="name">tool</div>
                <div class="code-name">&amp;#xe7e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7e3;</span>
                <div class="name">top</div>
                <div class="code-name">&amp;#xe7e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7e4;</span>
                <div class="name">smile</div>
                <div class="code-name">&amp;#xe7e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7e5;</span>
                <div class="name">textile-products</div>
                <div class="code-name">&amp;#xe7e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7e6;</span>
                <div class="name">trade alert</div>
                <div class="code-name">&amp;#xe7e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7e7;</span>
                <div class="name">top sales</div>
                <div class="code-name">&amp;#xe7e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7e8;</span>
                <div class="name">trading volume</div>
                <div class="code-name">&amp;#xe7e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7e9;</span>
                <div class="name">training</div>
                <div class="code-name">&amp;#xe7e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ea;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe7ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7eb;</span>
                <div class="name">RFQ-word</div>
                <div class="code-name">&amp;#xe7eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ec;</span>
                <div class="name">view larger</div>
                <div class="code-name">&amp;#xe7ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ed;</span>
                <div class="name">viewgallery</div>
                <div class="code-name">&amp;#xe7ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ee;</span>
                <div class="name">vehivles</div>
                <div class="code-name">&amp;#xe7ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ef;</span>
                <div class="name">trust</div>
                <div class="code-name">&amp;#xe7ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7f0;</span>
                <div class="name">warning</div>
                <div class="code-name">&amp;#xe7f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7f1;</span>
                <div class="name">warehouse</div>
                <div class="code-name">&amp;#xe7f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7f2;</span>
                <div class="name">shoes</div>
                <div class="code-name">&amp;#xe7f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7f3;</span>
                <div class="name">video</div>
                <div class="code-name">&amp;#xe7f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7f4;</span>
                <div class="name">viewlist</div>
                <div class="code-name">&amp;#xe7f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7f5;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe7f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7f6;</span>
                <div class="name">store</div>
                <div class="code-name">&amp;#xe7f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7f7;</span>
                <div class="name">tool-hardware</div>
                <div class="code-name">&amp;#xe7f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7f8;</span>
                <div class="name">vs</div>
                <div class="code-name">&amp;#xe7f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7f9;</span>
                <div class="name">toy</div>
                <div class="code-name">&amp;#xe7f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7fa;</span>
                <div class="name">sport</div>
                <div class="code-name">&amp;#xe7fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7fb;</span>
                <div class="name">credit card</div>
                <div class="code-name">&amp;#xe7fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7fc;</span>
                <div class="name">contacts</div>
                <div class="code-name">&amp;#xe7fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7fd;</span>
                <div class="name">checkstand</div>
                <div class="code-name">&amp;#xe7fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7fe;</span>
                <div class="name">aviation</div>
                <div class="code-name">&amp;#xe7fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe7ff;</span>
                <div class="name">Daytime mode</div>
                <div class="code-name">&amp;#xe7ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe800;</span>
                <div class="name">infant & mom</div>
                <div class="code-name">&amp;#xe800;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe801;</span>
                <div class="name">discounts</div>
                <div class="code-name">&amp;#xe801;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe802;</span>
                <div class="name">invoice</div>
                <div class="code-name">&amp;#xe802;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe803;</span>
                <div class="name">insurance</div>
                <div class="code-name">&amp;#xe803;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe804;</span>
                <div class="name">night mode</div>
                <div class="code-name">&amp;#xe804;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe805;</span>
                <div class="name">user center</div>
                <div class="code-name">&amp;#xe805;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe806;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe806;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe807;</span>
                <div class="name">vip</div>
                <div class="code-name">&amp;#xe807;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe808;</span>
                <div class="name">wallet</div>
                <div class="code-name">&amp;#xe808;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe809;</span>
                <div class="name">land transportation</div>
                <div class="code-name">&amp;#xe809;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe80a;</span>
                <div class="name">voice</div>
                <div class="code-name">&amp;#xe80a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe80b;</span>
                <div class="name">exchange rate</div>
                <div class="code-name">&amp;#xe80b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe80c;</span>
                <div class="name">contacts-fill</div>
                <div class="code-name">&amp;#xe80c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe80d;</span>
                <div class="name">add-account</div>
                <div class="code-name">&amp;#xe80d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe80e;</span>
                <div class="name">2years-fill</div>
                <div class="code-name">&amp;#xe80e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe80f;</span>
                <div class="name">add-cart-fill</div>
                <div class="code-name">&amp;#xe80f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe810;</span>
                <div class="name">add-fill</div>
                <div class="code-name">&amp;#xe810;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe811;</span>
                <div class="name">all-fill</div>
                <div class="code-name">&amp;#xe811;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe812;</span>
                <div class="name">ashbin-fill</div>
                <div class="code-name">&amp;#xe812;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe813;</span>
                <div class="name">calendar-fill</div>
                <div class="code-name">&amp;#xe813;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe814;</span>
                <div class="name">bad-fill</div>
                <div class="code-name">&amp;#xe814;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe815;</span>
                <div class="name">bussiness-man-fill</div>
                <div class="code-name">&amp;#xe815;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe816;</span>
                <div class="name">atm-fill</div>
                <div class="code-name">&amp;#xe816;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe817;</span>
                <div class="name">cart- full-fill</div>
                <div class="code-name">&amp;#xe817;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe818;</span>
                <div class="name">cart-Empty-fill</div>
                <div class="code-name">&amp;#xe818;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe819;</span>
                <div class="name">camera switching-fill</div>
                <div class="code-name">&amp;#xe819;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe81a;</span>
                <div class="name">atm-away-fill</div>
                <div class="code-name">&amp;#xe81a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe81b;</span>
                <div class="name">certified-supplier-fill</div>
                <div class="code-name">&amp;#xe81b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe81c;</span>
                <div class="name">calculator-fill</div>
                <div class="code-name">&amp;#xe81c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe81d;</span>
                <div class="name">clock-fill</div>
                <div class="code-name">&amp;#xe81d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe81e;</span>
                <div class="name">ali-clould-fill</div>
                <div class="code-name">&amp;#xe81e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe81f;</span>
                <div class="name">color-fill</div>
                <div class="code-name">&amp;#xe81f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe820;</span>
                <div class="name">coupons-fill</div>
                <div class="code-name">&amp;#xe820;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe821;</span>
                <div class="name">cecurity-protection-fill</div>
                <div class="code-name">&amp;#xe821;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe822;</span>
                <div class="name">credit-level-fill</div>
                <div class="code-name">&amp;#xe822;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe823;</span>
                <div class="name">default-template-fill</div>
                <div class="code-name">&amp;#xe823;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe824;</span>
                <div class="name">Currency Converter-fill</div>
                <div class="code-name">&amp;#xe824;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe825;</span>
                <div class="name">Customer management-fill</div>
                <div class="code-name">&amp;#xe825;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe826;</span>
                <div class="name">discounts-fill</div>
                <div class="code-name">&amp;#xe826;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe827;</span>
                <div class="name">Daytime mode-fill</div>
                <div class="code-name">&amp;#xe827;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe828;</span>
                <div class="name">exl-fill</div>
                <div class="code-name">&amp;#xe828;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe829;</span>
                <div class="name">cry-fill</div>
                <div class="code-name">&amp;#xe829;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe82a;</span>
                <div class="name">email-fill</div>
                <div class="code-name">&amp;#xe82a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe82b;</span>
                <div class="name">filter-fill</div>
                <div class="code-name">&amp;#xe82b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe82c;</span>
                <div class="name">folder-fill</div>
                <div class="code-name">&amp;#xe82c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe82d;</span>
                <div class="name">feeds-fill</div>
                <div class="code-name">&amp;#xe82d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe82e;</span>
                <div class="name">gold-supplie-fill</div>
                <div class="code-name">&amp;#xe82e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe82f;</span>
                <div class="name">form-fill</div>
                <div class="code-name">&amp;#xe82f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe830;</span>
                <div class="name">camera-fill</div>
                <div class="code-name">&amp;#xe830;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe831;</span>
                <div class="name">good-fill</div>
                <div class="code-name">&amp;#xe831;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe832;</span>
                <div class="name">image-text-fill</div>
                <div class="code-name">&amp;#xe832;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe833;</span>
                <div class="name">inspection-fill</div>
                <div class="code-name">&amp;#xe833;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe834;</span>
                <div class="name">hot-fill</div>
                <div class="code-name">&amp;#xe834;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe835;</span>
                <div class="name">company-fill</div>
                <div class="code-name">&amp;#xe835;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe836;</span>
                <div class="name">discount-fill</div>
                <div class="code-name">&amp;#xe836;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe837;</span>
                <div class="name">insurance-fill</div>
                <div class="code-name">&amp;#xe837;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe838;</span>
                <div class="name">inquiry-template-fill</div>
                <div class="code-name">&amp;#xe838;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe839;</span>
                <div class="name">left button-fill</div>
                <div class="code-name">&amp;#xe839;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe83a;</span>
                <div class="name">integral-fill</div>
                <div class="code-name">&amp;#xe83a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe83b;</span>
                <div class="name">help</div>
                <div class="code-name">&amp;#xe83b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe83c;</span>
                <div class="name">listing-content-fill</div>
                <div class="code-name">&amp;#xe83c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe83d;</span>
                <div class="name">logistic-logo-fill</div>
                <div class="code-name">&amp;#xe83d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe83e;</span>
                <div class="name">Money management-fill</div>
                <div class="code-name">&amp;#xe83e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe83f;</span>
                <div class="name">manage-order-fill</div>
                <div class="code-name">&amp;#xe83f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe840;</span>
                <div class="name">multi-language-fill</div>
                <div class="code-name">&amp;#xe840;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe841;</span>
                <div class="name">logistics-icon-fill</div>
                <div class="code-name">&amp;#xe841;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe842;</span>
                <div class="name">New user zone-fill</div>
                <div class="code-name">&amp;#xe842;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe843;</span>
                <div class="name">night mode-fill</div>
                <div class="code-name">&amp;#xe843;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe844;</span>
                <div class="name">office-supplies-fill</div>
                <div class="code-name">&amp;#xe844;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe845;</span>
                <div class="name">notice-fill</div>
                <div class="code-name">&amp;#xe845;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe846;</span>
                <div class="name">mute</div>
                <div class="code-name">&amp;#xe846;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe847;</span>
                <div class="name">order-fill</div>
                <div class="code-name">&amp;#xe847;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe848;</span>
                <div class="name">password</div>
                <div class="code-name">&amp;#xe848;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe849;</span>
                <div class="name">map</div>
                <div class="code-name">&amp;#xe849;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe84a;</span>
                <div class="name">paylater-fill</div>
                <div class="code-name">&amp;#xe84a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe84b;</span>
                <div class="name">phone-fill</div>
                <div class="code-name">&amp;#xe84b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe84c;</span>
                <div class="name">online-tracking-fill</div>
                <div class="code-name">&amp;#xe84c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe84d;</span>
                <div class="name">play-fill</div>
                <div class="code-name">&amp;#xe84d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe84e;</span>
                <div class="name">pdf-fill</div>
                <div class="code-name">&amp;#xe84e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe84f;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe84f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe850;</span>
                <div class="name">pin-fill</div>
                <div class="code-name">&amp;#xe850;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe851;</span>
                <div class="name">product-fill</div>
                <div class="code-name">&amp;#xe851;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe852;</span>
                <div class="name">ranking list-fill</div>
                <div class="code-name">&amp;#xe852;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe853;</span>
                <div class="name">reduce-fill</div>
                <div class="code-name">&amp;#xe853;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe854;</span>
                <div class="name">reeor-fill</div>
                <div class="code-name">&amp;#xe854;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe855;</span>
                <div class="name">pic-fill</div>
                <div class="code-name">&amp;#xe855;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe856;</span>
                <div class="name">ranking list</div>
                <div class="code-name">&amp;#xe856;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe857;</span>
                <div class="name">product</div>
                <div class="code-name">&amp;#xe857;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe858;</span>
                <div class="name">prompt-fill</div>
                <div class="code-name">&amp;#xe858;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe859;</span>
                <div class="name">resonse rate-fill</div>
                <div class="code-name">&amp;#xe859;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe85a;</span>
                <div class="name">remind-fill</div>
                <div class="code-name">&amp;#xe85a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe85b;</span>
                <div class="name">Right button-fill</div>
                <div class="code-name">&amp;#xe85b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe85c;</span>
                <div class="name">RFQ-logo-fill</div>
                <div class="code-name">&amp;#xe85c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe85d;</span>
                <div class="name">RFQ-word-fill</div>
                <div class="code-name">&amp;#xe85d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe85e;</span>
                <div class="name">search cart-fill</div>
                <div class="code-name">&amp;#xe85e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe85f;</span>
                <div class="name">sales center-fill</div>
                <div class="code-name">&amp;#xe85f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe860;</span>
                <div class="name">save-fill</div>
                <div class="code-name">&amp;#xe860;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe861;</span>
                <div class="name">security-fill</div>
                <div class="code-name">&amp;#xe861;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe862;</span>
                <div class="name">category products-fill</div>
                <div class="code-name">&amp;#xe862;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe863;</span>
                <div class="name">signboard-fill</div>
                <div class="code-name">&amp;#xe863;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe864;</span>
                <div class="name">service-fill</div>
                <div class="code-name">&amp;#xe864;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe865;</span>
                <div class="name">shuffling-banner-fill</div>
                <div class="code-name">&amp;#xe865;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe866;</span>
                <div class="name">supplier-features-fill</div>
                <div class="code-name">&amp;#xe866;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe867;</span>
                <div class="name">store-fill</div>
                <div class="code-name">&amp;#xe867;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe868;</span>
                <div class="name">smile-fill</div>
                <div class="code-name">&amp;#xe868;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe869;</span>
                <div class="name">success-fill</div>
                <div class="code-name">&amp;#xe869;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe86a;</span>
                <div class="name">sound-filling-fill</div>
                <div class="code-name">&amp;#xe86a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe86b;</span>
                <div class="name">sound-Mute</div>
                <div class="code-name">&amp;#xe86b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe86c;</span>
                <div class="name">suspended-fill</div>
                <div class="code-name">&amp;#xe86c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe86d;</span>
                <div class="name">tool-fill</div>
                <div class="code-name">&amp;#xe86d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe86e;</span>
                <div class="name">task-management-fill</div>
                <div class="code-name">&amp;#xe86e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe86f;</span>
                <div class="name">unlock-fill</div>
                <div class="code-name">&amp;#xe86f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe870;</span>
                <div class="name">trust-fill</div>
                <div class="code-name">&amp;#xe870;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe871;</span>
                <div class="name">vip-fill</div>
                <div class="code-name">&amp;#xe871;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe872;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe872;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe873;</span>
                <div class="name">top-fill</div>
                <div class="code-name">&amp;#xe873;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe874;</span>
                <div class="name">view larger</div>
                <div class="code-name">&amp;#xe874;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe875;</span>
                <div class="name">voice-fill</div>
                <div class="code-name">&amp;#xe875;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe876;</span>
                <div class="name">warning-fill</div>
                <div class="code-name">&amp;#xe876;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe877;</span>
                <div class="name">warehouse-fill</div>
                <div class="code-name">&amp;#xe877;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe878;</span>
                <div class="name">zip-fill</div>
                <div class="code-name">&amp;#xe878;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe879;</span>
                <div class="name">trade-assurance-fill</div>
                <div class="code-name">&amp;#xe879;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe87a;</span>
                <div class="name">vs-fill</div>
                <div class="code-name">&amp;#xe87a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe87b;</span>
                <div class="name">video</div>
                <div class="code-name">&amp;#xe87b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe87c;</span>
                <div class="name">template-fill</div>
                <div class="code-name">&amp;#xe87c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe87d;</span>
                <div class="name">wallet</div>
                <div class="code-name">&amp;#xe87d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe87e;</span>
                <div class="name">training</div>
                <div class="code-name">&amp;#xe87e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe87f;</span>
                <div class="name">packing-labeling-fill</div>
                <div class="code-name">&amp;#xe87f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe880;</span>
                <div class="name">export services-fill</div>
                <div class="code-name">&amp;#xe880;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe881;</span>
                <div class="name">brand-fill</div>
                <div class="code-name">&amp;#xe881;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe882;</span>
                <div class="name">collection</div>
                <div class="code-name">&amp;#xe882;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe883;</span>
                <div class="name">consumption-fill</div>
                <div class="code-name">&amp;#xe883;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe884;</span>
                <div class="name">collection-fill</div>
                <div class="code-name">&amp;#xe884;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe885;</span>
                <div class="name">brand</div>
                <div class="code-name">&amp;#xe885;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe886;</span>
                <div class="name">rejected-order-fill</div>
                <div class="code-name">&amp;#xe886;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe887;</span>
                <div class="name">homepage-ads-fill</div>
                <div class="code-name">&amp;#xe887;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe888;</span>
                <div class="name">homepage-ads</div>
                <div class="code-name">&amp;#xe888;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe889;</span>
                <div class="name">scenes-fill</div>
                <div class="code-name">&amp;#xe889;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe88a;</span>
                <div class="name">scenes</div>
                <div class="code-name">&amp;#xe88a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe88b;</span>
                <div class="name">similar-product-fill</div>
                <div class="code-name">&amp;#xe88b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe88c;</span>
                <div class="name">topraning-fill</div>
                <div class="code-name">&amp;#xe88c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe88d;</span>
                <div class="name">consumption</div>
                <div class="code-name">&amp;#xe88d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe88e;</span>
                <div class="name">topraning</div>
                <div class="code-name">&amp;#xe88e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe88f;</span>
                <div class="name">gold-supplier</div>
                <div class="code-name">&amp;#xe88f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe890;</span>
                <div class="name">message center-fill</div>
                <div class="code-name">&amp;#xe890;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe891;</span>
                <div class="name">quick</div>
                <div class="code-name">&amp;#xe891;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe892;</span>
                <div class="name">writing</div>
                <div class="code-name">&amp;#xe892;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe893;</span>
                <div class="name">doc-fill</div>
                <div class="code-name">&amp;#xe893;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe894;</span>
                <div class="name">jpge-fill</div>
                <div class="code-name">&amp;#xe894;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe895;</span>
                <div class="name">gif-fill</div>
                <div class="code-name">&amp;#xe895;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe896;</span>
                <div class="name">bmp-fill</div>
                <div class="code-name">&amp;#xe896;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe897;</span>
                <div class="name">tif-fill</div>
                <div class="code-name">&amp;#xe897;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe898;</span>
                <div class="name">png-fill</div>
                <div class="code-name">&amp;#xe898;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe899;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe899;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe89a;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe89a;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe89b;</span>
                <div class="name">send inquiry-fill</div>
                <div class="code-name">&amp;#xe89b;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe89c;</span>
                <div class="name">comments-fill</div>
                <div class="code-name">&amp;#xe89c;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe89d;</span>
                <div class="name">account-fill</div>
                <div class="code-name">&amp;#xe89d;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe89e;</span>
                <div class="name">feed-logo-fill</div>
                <div class="code-name">&amp;#xe89e;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe89f;</span>
                <div class="name">feed-logo</div>
                <div class="code-name">&amp;#xe89f;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8a0;</span>
                <div class="name">home-fill</div>
                <div class="code-name">&amp;#xe8a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8a1;</span>
                <div class="name">add-select</div>
                <div class="code-name">&amp;#xe8a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8a2;</span>
                <div class="name">sami-select</div>
                <div class="code-name">&amp;#xe8a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8a3;</span>
                <div class="name">camera</div>
                <div class="code-name">&amp;#xe8a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8a4;</span>
                <div class="name">arrow-down</div>
                <div class="code-name">&amp;#xe8a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8a5;</span>
                <div class="name">account</div>
                <div class="code-name">&amp;#xe8a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8a6;</span>
                <div class="name">comments</div>
                <div class="code-name">&amp;#xe8a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8a7;</span>
                <div class="name">cart-Empty</div>
                <div class="code-name">&amp;#xe8a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8a8;</span>
                <div class="name">favorites</div>
                <div class="code-name">&amp;#xe8a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8a9;</span>
                <div class="name">order</div>
                <div class="code-name">&amp;#xe8a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8aa;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe8aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8ab;</span>
                <div class="name">trade-assurance</div>
                <div class="code-name">&amp;#xe8ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8ac;</span>
                <div class="name">user center</div>
                <div class="code-name">&amp;#xe8ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon bbfont">&#xe8ad;</span>
                <div class="name">trading data</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'bbfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#bbfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.bbfont {
  font-family: "bbfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="bbfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"bbfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon bbfont bb-icon-history"></span>
            <div class="name">
              history
            </div>
            <div class="code-name">.bb-icon-history
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-editor"></span>
            <div class="name">
              editor
            </div>
            <div class="code-name">.bb-icon-editor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-data"></span>
            <div class="name">
              data
            </div>
            <div class="code-name">.bb-icon-data
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-gift"></span>
            <div class="name">
              gift
            </div>
            <div class="code-name">.bb-icon-gift
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-integral"></span>
            <div class="name">
              integral
            </div>
            <div class="code-name">.bb-icon-integral
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-nav-list"></span>
            <div class="name">
              nav-list
            </div>
            <div class="code-name">.bb-icon-nav-list
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-pic"></span>
            <div class="name">
              pic
            </div>
            <div class="code-name">.bb-icon-pic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Notvisible"></span>
            <div class="name">
              Not visible
            </div>
            <div class="code-name">.bb-icon-Notvisible
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-play"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.bb-icon-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-rising"></span>
            <div class="name">
              rising
            </div>
            <div class="code-name">.bb-icon-rising
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-QRcode"></span>
            <div class="name">
              QRcode
            </div>
            <div class="code-name">.bb-icon-QRcode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-rmb"></span>
            <div class="name">
              rmb
            </div>
            <div class="code-name">.bb-icon-rmb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-similar-product"></span>
            <div class="name">
              similar-product
            </div>
            <div class="code-name">.bb-icon-similar-product
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Exportservices"></span>
            <div class="name">
              export services
            </div>
            <div class="code-name">.bb-icon-Exportservices
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-sendinquiry"></span>
            <div class="name">
              send inquiry
            </div>
            <div class="code-name">.bb-icon-sendinquiry
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-all-fill"></span>
            <div class="name">
              all-fill
            </div>
            <div class="code-name">.bb-icon-all-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-favorites-fill"></span>
            <div class="name">
              favorites-fill
            </div>
            <div class="code-name">.bb-icon-favorites-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-integral-fill"></span>
            <div class="name">
              integral-fill
            </div>
            <div class="code-name">.bb-icon-integral-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-namecard-fill"></span>
            <div class="name">
              namecard-fill
            </div>
            <div class="code-name">.bb-icon-namecard-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-pic-fill"></span>
            <div class="name">
              pic-fill
            </div>
            <div class="code-name">.bb-icon-pic-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-play-fill"></span>
            <div class="name">
              play-fill
            </div>
            <div class="code-name">.bb-icon-play-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-prompt-fill"></span>
            <div class="name">
              prompt-fill
            </div>
            <div class="code-name">.bb-icon-prompt-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-stop-fill"></span>
            <div class="name">
              stop-fill
            </div>
            <div class="code-name">.bb-icon-stop-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-column"></span>
            <div class="name">
              3column
            </div>
            <div class="code-name">.bb-icon-column
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-add-account"></span>
            <div class="name">
              add-account
            </div>
            <div class="code-name">.bb-icon-add-account
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-column1"></span>
            <div class="name">
              4column
            </div>
            <div class="code-name">.bb-icon-column1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.bb-icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-agriculture"></span>
            <div class="name">
              agriculture
            </div>
            <div class="code-name">.bb-icon-agriculture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-years"></span>
            <div class="name">
              2years
            </div>
            <div class="code-name">.bb-icon-years
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-add-cart"></span>
            <div class="name">
              add-cart
            </div>
            <div class="code-name">.bb-icon-add-cart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-arrow-right"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.bb-icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-arrow-lift"></span>
            <div class="name">
              arrow-lift
            </div>
            <div class="code-name">.bb-icon-arrow-lift
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-apparel"></span>
            <div class="name">
              apparel
            </div>
            <div class="code-name">.bb-icon-apparel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-all"></span>
            <div class="name">
              all
            </div>
            <div class="code-name">.bb-icon-all
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-arrow-up"></span>
            <div class="name">
              arrow-up
            </div>
            <div class="code-name">.bb-icon-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-ascending"></span>
            <div class="name">
              ascending
            </div>
            <div class="code-name">.bb-icon-ascending
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-ashbin"></span>
            <div class="name">
              ashbin
            </div>
            <div class="code-name">.bb-icon-ashbin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-atm"></span>
            <div class="name">
              atm
            </div>
            <div class="code-name">.bb-icon-atm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-bad"></span>
            <div class="name">
              bad
            </div>
            <div class="code-name">.bb-icon-bad
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-attachent"></span>
            <div class="name">
              attachent
            </div>
            <div class="code-name">.bb-icon-attachent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-browse"></span>
            <div class="name">
              browse
            </div>
            <div class="code-name">.bb-icon-browse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-beauty"></span>
            <div class="name">
              beauty
            </div>
            <div class="code-name">.bb-icon-beauty
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-atm-away"></span>
            <div class="name">
              atm-away
            </div>
            <div class="code-name">.bb-icon-atm-away
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-assessed-badge"></span>
            <div class="name">
              assessed-badge
            </div>
            <div class="code-name">.bb-icon-assessed-badge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-auto"></span>
            <div class="name">
              auto
            </div>
            <div class="code-name">.bb-icon-auto
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-bags"></span>
            <div class="name">
              bags
            </div>
            <div class="code-name">.bb-icon-bags
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-calendar"></span>
            <div class="name">
              calendar
            </div>
            <div class="code-name">.bb-icon-calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cart-full"></span>
            <div class="name">
              cart- full
            </div>
            <div class="code-name">.bb-icon-cart-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-calculator"></span>
            <div class="name">
              calculator
            </div>
            <div class="code-name">.bb-icon-calculator
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cameraswitching"></span>
            <div class="name">
              camera switching
            </div>
            <div class="code-name">.bb-icon-cameraswitching
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cecurity-protection"></span>
            <div class="name">
              cecurity-protection
            </div>
            <div class="code-name">.bb-icon-cecurity-protection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-category"></span>
            <div class="name">
              category
            </div>
            <div class="code-name">.bb-icon-category
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.bb-icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-certified-supplier"></span>
            <div class="name">
              certified-supplier
            </div>
            <div class="code-name">.bb-icon-certified-supplier
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cart-Empty"></span>
            <div class="name">
              cart-Empty
            </div>
            <div class="code-name">.bb-icon-cart-Empty
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-code"></span>
            <div class="name">
              code
            </div>
            <div class="code-name">.bb-icon-code
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-color"></span>
            <div class="name">
              color
            </div>
            <div class="code-name">.bb-icon-color
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-conditions"></span>
            <div class="name">
              conditions
            </div>
            <div class="code-name">.bb-icon-conditions
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-confirm"></span>
            <div class="name">
              confirm
            </div>
            <div class="code-name">.bb-icon-confirm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-company"></span>
            <div class="name">
              company
            </div>
            <div class="code-name">.bb-icon-company
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-ali-clould"></span>
            <div class="name">
              ali-clould
            </div>
            <div class="code-name">.bb-icon-ali-clould
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.bb-icon-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-credit-level"></span>
            <div class="name">
              credit-level
            </div>
            <div class="code-name">.bb-icon-credit-level
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-coupons"></span>
            <div class="name">
              coupons
            </div>
            <div class="code-name">.bb-icon-coupons
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-connections"></span>
            <div class="name">
              connections
            </div>
            <div class="code-name">.bb-icon-connections
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cry"></span>
            <div class="name">
              cry
            </div>
            <div class="code-name">.bb-icon-cry
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-costoms-alearance"></span>
            <div class="name">
              costoms-alearance
            </div>
            <div class="code-name">.bb-icon-costoms-alearance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.bb-icon-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-CurrencyConverter"></span>
            <div class="name">
              Currency Converter
            </div>
            <div class="code-name">.bb-icon-CurrencyConverter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cut"></span>
            <div class="name">
              cut
            </div>
            <div class="code-name">.bb-icon-cut
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-data1"></span>
            <div class="name">
              data
            </div>
            <div class="code-name">.bb-icon-data1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Customermanagement"></span>
            <div class="name">
              Customer management
            </div>
            <div class="code-name">.bb-icon-Customermanagement
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-descending"></span>
            <div class="name">
              descending
            </div>
            <div class="code-name">.bb-icon-descending
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-double-arro-right"></span>
            <div class="name">
              double-arro- right
            </div>
            <div class="code-name">.bb-icon-double-arro-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-customization"></span>
            <div class="name">
              customization
            </div>
            <div class="code-name">.bb-icon-customization
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-double-arrow-left"></span>
            <div class="name">
              double-arrow-left
            </div>
            <div class="code-name">.bb-icon-double-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-discount"></span>
            <div class="name">
              discount
            </div>
            <div class="code-name">.bb-icon-discount
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.bb-icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-dollar"></span>
            <div class="name">
              dollar
            </div>
            <div class="code-name">.bb-icon-dollar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-default-template"></span>
            <div class="name">
              default-template
            </div>
            <div class="code-name">.bb-icon-default-template
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-editor1"></span>
            <div class="name">
              editor
            </div>
            <div class="code-name">.bb-icon-editor1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-eletrical"></span>
            <div class="name">
              eletrical
            </div>
            <div class="code-name">.bb-icon-eletrical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-electronics"></span>
            <div class="name">
              electronics
            </div>
            <div class="code-name">.bb-icon-electronics
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-etrical-equipm"></span>
            <div class="name">
              etrical-equipm
            </div>
            <div class="code-name">.bb-icon-etrical-equipm
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-ellipsis"></span>
            <div class="name">
              ellipsis
            </div>
            <div class="code-name">.bb-icon-ellipsis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-email"></span>
            <div class="name">
              email
            </div>
            <div class="code-name">.bb-icon-email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-falling"></span>
            <div class="name">
              falling
            </div>
            <div class="code-name">.bb-icon-falling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-earth"></span>
            <div class="name">
              earth
            </div>
            <div class="code-name">.bb-icon-earth
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-filter"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">.bb-icon-filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-furniture"></span>
            <div class="name">
              furniture
            </div>
            <div class="code-name">.bb-icon-furniture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-folder"></span>
            <div class="name">
              folder
            </div>
            <div class="code-name">.bb-icon-folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-feeds"></span>
            <div class="name">
              feeds
            </div>
            <div class="code-name">.bb-icon-feeds
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-history1"></span>
            <div class="name">
              history
            </div>
            <div class="code-name">.bb-icon-history1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-hardware"></span>
            <div class="name">
              hardware
            </div>
            <div class="code-name">.bb-icon-hardware
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-help"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.bb-icon-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-good"></span>
            <div class="name">
              good
            </div>
            <div class="code-name">.bb-icon-good
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Householdappliances"></span>
            <div class="name">
              Household appliances
            </div>
            <div class="code-name">.bb-icon-Householdappliances
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-gift1"></span>
            <div class="name">
              gift
            </div>
            <div class="code-name">.bb-icon-gift1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-form"></span>
            <div class="name">
              form
            </div>
            <div class="code-name">.bb-icon-form
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-image-text"></span>
            <div class="name">
              image-text
            </div>
            <div class="code-name">.bb-icon-image-text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-hot"></span>
            <div class="name">
              hot
            </div>
            <div class="code-name">.bb-icon-hot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-inspection"></span>
            <div class="name">
              inspection
            </div>
            <div class="code-name">.bb-icon-inspection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-leftbutton"></span>
            <div class="name">
              left button
            </div>
            <div class="code-name">.bb-icon-leftbutton
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-jewelry"></span>
            <div class="name">
              jewelry
            </div>
            <div class="code-name">.bb-icon-jewelry
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-ipad"></span>
            <div class="name">
              ipad
            </div>
            <div class="code-name">.bb-icon-ipad
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-leftarrow"></span>
            <div class="name">
              left arrow
            </div>
            <div class="code-name">.bb-icon-leftarrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-integral1"></span>
            <div class="name">
              integral
            </div>
            <div class="code-name">.bb-icon-integral1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-kitchen"></span>
            <div class="name">
              kitchen
            </div>
            <div class="code-name">.bb-icon-kitchen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-inquiry-template"></span>
            <div class="name">
              inquiry-template
            </div>
            <div class="code-name">.bb-icon-inquiry-template
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.bb-icon-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-libra"></span>
            <div class="name">
              libra
            </div>
            <div class="code-name">.bb-icon-libra
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-loading"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.bb-icon-loading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-listing-content"></span>
            <div class="name">
              listing-content
            </div>
            <div class="code-name">.bb-icon-listing-content
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-lights"></span>
            <div class="name">
              lights
            </div>
            <div class="code-name">.bb-icon-lights
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-logistics-icon"></span>
            <div class="name">
              logistics-icon
            </div>
            <div class="code-name">.bb-icon-logistics-icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-messagecenter"></span>
            <div class="name">
              message center
            </div>
            <div class="code-name">.bb-icon-messagecenter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-mobile-phone"></span>
            <div class="name">
              mobile-phone
            </div>
            <div class="code-name">.bb-icon-mobile-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-manage-order"></span>
            <div class="name">
              manage-order
            </div>
            <div class="code-name">.bb-icon-manage-order
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-move"></span>
            <div class="name">
              move
            </div>
            <div class="code-name">.bb-icon-move
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Moneymanagement"></span>
            <div class="name">
              Money management
            </div>
            <div class="code-name">.bb-icon-Moneymanagement
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-namecard"></span>
            <div class="name">
              namecard
            </div>
            <div class="code-name">.bb-icon-namecard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-map"></span>
            <div class="name">
              map
            </div>
            <div class="code-name">.bb-icon-map
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Newuserzone"></span>
            <div class="name">
              New user zone
            </div>
            <div class="code-name">.bb-icon-Newuserzone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-multi-language"></span>
            <div class="name">
              multi-language
            </div>
            <div class="code-name">.bb-icon-multi-language
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-office"></span>
            <div class="name">
              office
            </div>
            <div class="code-name">.bb-icon-office
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-notice"></span>
            <div class="name">
              notice
            </div>
            <div class="code-name">.bb-icon-notice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-ontimeshipment"></span>
            <div class="name">
              on time shipment
            </div>
            <div class="code-name">.bb-icon-ontimeshipment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-office-supplies"></span>
            <div class="name">
              office-supplies
            </div>
            <div class="code-name">.bb-icon-office-supplies
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-password"></span>
            <div class="name">
              password
            </div>
            <div class="code-name">.bb-icon-password
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Notvisible1"></span>
            <div class="name">
              Not visible
            </div>
            <div class="code-name">.bb-icon-Notvisible1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-operation"></span>
            <div class="name">
              operation
            </div>
            <div class="code-name">.bb-icon-operation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-packaging"></span>
            <div class="name">
              packaging
            </div>
            <div class="code-name">.bb-icon-packaging
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-online-tracking"></span>
            <div class="name">
              online-tracking
            </div>
            <div class="code-name">.bb-icon-online-tracking
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-packing-labeling"></span>
            <div class="name">
              packing-labeling
            </div>
            <div class="code-name">.bb-icon-packing-labeling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.bb-icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-pic1"></span>
            <div class="name">
              pic
            </div>
            <div class="code-name">.bb-icon-pic1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-pin"></span>
            <div class="name">
              pin
            </div>
            <div class="code-name">.bb-icon-pin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-play1"></span>
            <div class="name">
              play
            </div>
            <div class="code-name">.bb-icon-play1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-logistic-logo"></span>
            <div class="name">
              logistic-logo
            </div>
            <div class="code-name">.bb-icon-logistic-logo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-print"></span>
            <div class="name">
              print
            </div>
            <div class="code-name">.bb-icon-print
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-product"></span>
            <div class="name">
              product
            </div>
            <div class="code-name">.bb-icon-product
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-machinery"></span>
            <div class="name">
              machinery
            </div>
            <div class="code-name">.bb-icon-machinery
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-process"></span>
            <div class="name">
              process
            </div>
            <div class="code-name">.bb-icon-process
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-prompt"></span>
            <div class="name">
              prompt
            </div>
            <div class="code-name">.bb-icon-prompt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-QRcode1"></span>
            <div class="name">
              QRcode
            </div>
            <div class="code-name">.bb-icon-QRcode1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-reeor"></span>
            <div class="name">
              reeor
            </div>
            <div class="code-name">.bb-icon-reeor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-reduce"></span>
            <div class="name">
              reduce
            </div>
            <div class="code-name">.bb-icon-reduce
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Non-staplefood"></span>
            <div class="name">
              Non-staple food
            </div>
            <div class="code-name">.bb-icon-Non-staplefood
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-rejected-order"></span>
            <div class="name">
              rejected-order
            </div>
            <div class="code-name">.bb-icon-rejected-order
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-resonserate"></span>
            <div class="name">
              resonse rate
            </div>
            <div class="code-name">.bb-icon-resonserate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-remind"></span>
            <div class="name">
              remind
            </div>
            <div class="code-name">.bb-icon-remind
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-responsetime"></span>
            <div class="name">
              response time
            </div>
            <div class="code-name">.bb-icon-responsetime
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-return"></span>
            <div class="name">
              return
            </div>
            <div class="code-name">.bb-icon-return
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-paylater"></span>
            <div class="name">
              paylater
            </div>
            <div class="code-name">.bb-icon-paylater
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-rising1"></span>
            <div class="name">
              rising
            </div>
            <div class="code-name">.bb-icon-rising1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Rightarrow"></span>
            <div class="name">
              Right arrow
            </div>
            <div class="code-name">.bb-icon-Rightarrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-rmb1"></span>
            <div class="name">
              rmb
            </div>
            <div class="code-name">.bb-icon-rmb1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-RFQ-logo"></span>
            <div class="name">
              RFQ-logo
            </div>
            <div class="code-name">.bb-icon-RFQ-logo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-save"></span>
            <div class="name">
              save
            </div>
            <div class="code-name">.bb-icon-save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-scanning"></span>
            <div class="name">
              scanning
            </div>
            <div class="code-name">.bb-icon-scanning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-security"></span>
            <div class="name">
              security
            </div>
            <div class="code-name">.bb-icon-security
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-salescenter"></span>
            <div class="name">
              sales center
            </div>
            <div class="code-name">.bb-icon-salescenter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-seleted"></span>
            <div class="name">
              seleted
            </div>
            <div class="code-name">.bb-icon-seleted
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-searchcart"></span>
            <div class="name">
              search cart
            </div>
            <div class="code-name">.bb-icon-searchcart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-raw"></span>
            <div class="name">
              raw
            </div>
            <div class="code-name">.bb-icon-raw
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-service"></span>
            <div class="name">
              service
            </div>
            <div class="code-name">.bb-icon-service
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.bb-icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-signboard"></span>
            <div class="name">
              signboard
            </div>
            <div class="code-name">.bb-icon-signboard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-shuffling-banner"></span>
            <div class="name">
              shuffling-banner
            </div>
            <div class="code-name">.bb-icon-shuffling-banner
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Rightbutton"></span>
            <div class="name">
              Right button
            </div>
            <div class="code-name">.bb-icon-Rightbutton
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-sorting"></span>
            <div class="name">
              sorting
            </div>
            <div class="code-name">.bb-icon-sorting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-sound-Mute"></span>
            <div class="name">
              sound-Mute
            </div>
            <div class="code-name">.bb-icon-sound-Mute
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Similarproducts"></span>
            <div class="name">
              category products
            </div>
            <div class="code-name">.bb-icon-Similarproducts
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-sound-filling"></span>
            <div class="name">
              sound-filling
            </div>
            <div class="code-name">.bb-icon-sound-filling
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-suggest"></span>
            <div class="name">
              suggest
            </div>
            <div class="code-name">.bb-icon-suggest
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-stop"></span>
            <div class="name">
              stop
            </div>
            <div class="code-name">.bb-icon-stop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-success"></span>
            <div class="name">
              success
            </div>
            <div class="code-name">.bb-icon-success
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-supplier-features"></span>
            <div class="name">
              supplier-features
            </div>
            <div class="code-name">.bb-icon-supplier-features
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-switch"></span>
            <div class="name">
              switch
            </div>
            <div class="code-name">.bb-icon-switch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-survey"></span>
            <div class="name">
              survey
            </div>
            <div class="code-name">.bb-icon-survey
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-template"></span>
            <div class="name">
              template
            </div>
            <div class="code-name">.bb-icon-template
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-text"></span>
            <div class="name">
              text
            </div>
            <div class="code-name">.bb-icon-text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-suspended"></span>
            <div class="name">
              suspended
            </div>
            <div class="code-name">.bb-icon-suspended
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-task-management"></span>
            <div class="name">
              task-management
            </div>
            <div class="code-name">.bb-icon-task-management
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-tool"></span>
            <div class="name">
              tool
            </div>
            <div class="code-name">.bb-icon-tool
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Top"></span>
            <div class="name">
              top
            </div>
            <div class="code-name">.bb-icon-Top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-smile"></span>
            <div class="name">
              smile
            </div>
            <div class="code-name">.bb-icon-smile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-textile-products"></span>
            <div class="name">
              textile-products
            </div>
            <div class="code-name">.bb-icon-textile-products
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-tradealert"></span>
            <div class="name">
              trade alert
            </div>
            <div class="code-name">.bb-icon-tradealert
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-topsales"></span>
            <div class="name">
              top sales
            </div>
            <div class="code-name">.bb-icon-topsales
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-tradingvolume"></span>
            <div class="name">
              trading volume
            </div>
            <div class="code-name">.bb-icon-tradingvolume
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-training"></span>
            <div class="name">
              training
            </div>
            <div class="code-name">.bb-icon-training
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.bb-icon-upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-RFQ-word"></span>
            <div class="name">
              RFQ-word
            </div>
            <div class="code-name">.bb-icon-RFQ-word
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-viewlarger"></span>
            <div class="name">
              view larger
            </div>
            <div class="code-name">.bb-icon-viewlarger
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-viewgallery"></span>
            <div class="name">
              viewgallery
            </div>
            <div class="code-name">.bb-icon-viewgallery
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-vehivles"></span>
            <div class="name">
              vehivles
            </div>
            <div class="code-name">.bb-icon-vehivles
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-trust"></span>
            <div class="name">
              trust
            </div>
            <div class="code-name">.bb-icon-trust
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.bb-icon-warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-warehouse"></span>
            <div class="name">
              warehouse
            </div>
            <div class="code-name">.bb-icon-warehouse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-shoes"></span>
            <div class="name">
              shoes
            </div>
            <div class="code-name">.bb-icon-shoes
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-video"></span>
            <div class="name">
              video
            </div>
            <div class="code-name">.bb-icon-video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-viewlist"></span>
            <div class="name">
              viewlist
            </div>
            <div class="code-name">.bb-icon-viewlist
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-set"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.bb-icon-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-store"></span>
            <div class="name">
              store
            </div>
            <div class="code-name">.bb-icon-store
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-tool-hardware"></span>
            <div class="name">
              tool-hardware
            </div>
            <div class="code-name">.bb-icon-tool-hardware
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-vs"></span>
            <div class="name">
              vs
            </div>
            <div class="code-name">.bb-icon-vs
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-toy"></span>
            <div class="name">
              toy
            </div>
            <div class="code-name">.bb-icon-toy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-sport"></span>
            <div class="name">
              sport
            </div>
            <div class="code-name">.bb-icon-sport
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-creditcard"></span>
            <div class="name">
              credit card
            </div>
            <div class="code-name">.bb-icon-creditcard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-contacts"></span>
            <div class="name">
              contacts
            </div>
            <div class="code-name">.bb-icon-contacts
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-checkstand"></span>
            <div class="name">
              checkstand
            </div>
            <div class="code-name">.bb-icon-checkstand
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-aviation"></span>
            <div class="name">
              aviation
            </div>
            <div class="code-name">.bb-icon-aviation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Daytimemode"></span>
            <div class="name">
              Daytime mode
            </div>
            <div class="code-name">.bb-icon-Daytimemode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-infantmom"></span>
            <div class="name">
              infant & mom
            </div>
            <div class="code-name">.bb-icon-infantmom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-discounts"></span>
            <div class="name">
              discounts
            </div>
            <div class="code-name">.bb-icon-discounts
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-invoice"></span>
            <div class="name">
              invoice
            </div>
            <div class="code-name">.bb-icon-invoice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-insurance"></span>
            <div class="name">
              insurance
            </div>
            <div class="code-name">.bb-icon-insurance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-nightmode"></span>
            <div class="name">
              night mode
            </div>
            <div class="code-name">.bb-icon-nightmode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-usercenter"></span>
            <div class="name">
              user center
            </div>
            <div class="code-name">.bb-icon-usercenter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.bb-icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-vip"></span>
            <div class="name">
              vip
            </div>
            <div class="code-name">.bb-icon-vip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-wallet"></span>
            <div class="name">
              wallet
            </div>
            <div class="code-name">.bb-icon-wallet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-landtransportation"></span>
            <div class="name">
              land transportation
            </div>
            <div class="code-name">.bb-icon-landtransportation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-voice"></span>
            <div class="name">
              voice
            </div>
            <div class="code-name">.bb-icon-voice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-exchangerate"></span>
            <div class="name">
              exchange rate
            </div>
            <div class="code-name">.bb-icon-exchangerate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-contacts-fill"></span>
            <div class="name">
              contacts-fill
            </div>
            <div class="code-name">.bb-icon-contacts-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-add-account1"></span>
            <div class="name">
              add-account
            </div>
            <div class="code-name">.bb-icon-add-account1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-years-fill"></span>
            <div class="name">
              2years-fill
            </div>
            <div class="code-name">.bb-icon-years-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-add-cart-fill"></span>
            <div class="name">
              add-cart-fill
            </div>
            <div class="code-name">.bb-icon-add-cart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-add-fill"></span>
            <div class="name">
              add-fill
            </div>
            <div class="code-name">.bb-icon-add-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-all-fill1"></span>
            <div class="name">
              all-fill
            </div>
            <div class="code-name">.bb-icon-all-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-ashbin-fill"></span>
            <div class="name">
              ashbin-fill
            </div>
            <div class="code-name">.bb-icon-ashbin-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-calendar-fill"></span>
            <div class="name">
              calendar-fill
            </div>
            <div class="code-name">.bb-icon-calendar-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-bad-fill"></span>
            <div class="name">
              bad-fill
            </div>
            <div class="code-name">.bb-icon-bad-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-bussiness-man-fill"></span>
            <div class="name">
              bussiness-man-fill
            </div>
            <div class="code-name">.bb-icon-bussiness-man-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-atm-fill"></span>
            <div class="name">
              atm-fill
            </div>
            <div class="code-name">.bb-icon-atm-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cart-full-fill"></span>
            <div class="name">
              cart- full-fill
            </div>
            <div class="code-name">.bb-icon-cart-full-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cart-Empty-fill"></span>
            <div class="name">
              cart-Empty-fill
            </div>
            <div class="code-name">.bb-icon-cart-Empty-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cameraswitching-fill"></span>
            <div class="name">
              camera switching-fill
            </div>
            <div class="code-name">.bb-icon-cameraswitching-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-atm-away-fill"></span>
            <div class="name">
              atm-away-fill
            </div>
            <div class="code-name">.bb-icon-atm-away-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-certified-supplier-fill"></span>
            <div class="name">
              certified-supplier-fill
            </div>
            <div class="code-name">.bb-icon-certified-supplier-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-calculator-fill"></span>
            <div class="name">
              calculator-fill
            </div>
            <div class="code-name">.bb-icon-calculator-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-clock-fill"></span>
            <div class="name">
              clock-fill
            </div>
            <div class="code-name">.bb-icon-clock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-ali-clould-fill"></span>
            <div class="name">
              ali-clould-fill
            </div>
            <div class="code-name">.bb-icon-ali-clould-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-color-fill"></span>
            <div class="name">
              color-fill
            </div>
            <div class="code-name">.bb-icon-color-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-coupons-fill"></span>
            <div class="name">
              coupons-fill
            </div>
            <div class="code-name">.bb-icon-coupons-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cecurity-protection-fill"></span>
            <div class="name">
              cecurity-protection-fill
            </div>
            <div class="code-name">.bb-icon-cecurity-protection-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-credit-level-fill"></span>
            <div class="name">
              credit-level-fill
            </div>
            <div class="code-name">.bb-icon-credit-level-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-default-template-fill"></span>
            <div class="name">
              default-template-fill
            </div>
            <div class="code-name">.bb-icon-default-template-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-CurrencyConverter-fill"></span>
            <div class="name">
              Currency Converter-fill
            </div>
            <div class="code-name">.bb-icon-CurrencyConverter-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Customermanagement-fill"></span>
            <div class="name">
              Customer management-fill
            </div>
            <div class="code-name">.bb-icon-Customermanagement-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-discounts-fill"></span>
            <div class="name">
              discounts-fill
            </div>
            <div class="code-name">.bb-icon-discounts-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Daytimemode-fill"></span>
            <div class="name">
              Daytime mode-fill
            </div>
            <div class="code-name">.bb-icon-Daytimemode-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-exl-fill"></span>
            <div class="name">
              exl-fill
            </div>
            <div class="code-name">.bb-icon-exl-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cry-fill"></span>
            <div class="name">
              cry-fill
            </div>
            <div class="code-name">.bb-icon-cry-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-email-fill"></span>
            <div class="name">
              email-fill
            </div>
            <div class="code-name">.bb-icon-email-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-filter-fill"></span>
            <div class="name">
              filter-fill
            </div>
            <div class="code-name">.bb-icon-filter-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-folder-fill"></span>
            <div class="name">
              folder-fill
            </div>
            <div class="code-name">.bb-icon-folder-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-feeds-fill"></span>
            <div class="name">
              feeds-fill
            </div>
            <div class="code-name">.bb-icon-feeds-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-gold-supplie-fill"></span>
            <div class="name">
              gold-supplie-fill
            </div>
            <div class="code-name">.bb-icon-gold-supplie-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-form-fill"></span>
            <div class="name">
              form-fill
            </div>
            <div class="code-name">.bb-icon-form-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-camera-fill"></span>
            <div class="name">
              camera-fill
            </div>
            <div class="code-name">.bb-icon-camera-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-good-fill"></span>
            <div class="name">
              good-fill
            </div>
            <div class="code-name">.bb-icon-good-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-image-text-fill"></span>
            <div class="name">
              image-text-fill
            </div>
            <div class="code-name">.bb-icon-image-text-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-inspection-fill"></span>
            <div class="name">
              inspection-fill
            </div>
            <div class="code-name">.bb-icon-inspection-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-hot-fill"></span>
            <div class="name">
              hot-fill
            </div>
            <div class="code-name">.bb-icon-hot-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-company-fill"></span>
            <div class="name">
              company-fill
            </div>
            <div class="code-name">.bb-icon-company-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-discount-fill"></span>
            <div class="name">
              discount-fill
            </div>
            <div class="code-name">.bb-icon-discount-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-insurance-fill"></span>
            <div class="name">
              insurance-fill
            </div>
            <div class="code-name">.bb-icon-insurance-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-inquiry-template-fill"></span>
            <div class="name">
              inquiry-template-fill
            </div>
            <div class="code-name">.bb-icon-inquiry-template-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-leftbutton-fill"></span>
            <div class="name">
              left button-fill
            </div>
            <div class="code-name">.bb-icon-leftbutton-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-integral-fill1"></span>
            <div class="name">
              integral-fill
            </div>
            <div class="code-name">.bb-icon-integral-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-help1"></span>
            <div class="name">
              help
            </div>
            <div class="code-name">.bb-icon-help1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-listing-content-fill"></span>
            <div class="name">
              listing-content-fill
            </div>
            <div class="code-name">.bb-icon-listing-content-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-logistic-logo-fill"></span>
            <div class="name">
              logistic-logo-fill
            </div>
            <div class="code-name">.bb-icon-logistic-logo-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Moneymanagement-fill"></span>
            <div class="name">
              Money management-fill
            </div>
            <div class="code-name">.bb-icon-Moneymanagement-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-manage-order-fill"></span>
            <div class="name">
              manage-order-fill
            </div>
            <div class="code-name">.bb-icon-manage-order-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-multi-language-fill"></span>
            <div class="name">
              multi-language-fill
            </div>
            <div class="code-name">.bb-icon-multi-language-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-logistics-icon-fill"></span>
            <div class="name">
              logistics-icon-fill
            </div>
            <div class="code-name">.bb-icon-logistics-icon-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Newuserzone-fill"></span>
            <div class="name">
              New user zone-fill
            </div>
            <div class="code-name">.bb-icon-Newuserzone-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-nightmode-fill"></span>
            <div class="name">
              night mode-fill
            </div>
            <div class="code-name">.bb-icon-nightmode-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-office-supplies-fill"></span>
            <div class="name">
              office-supplies-fill
            </div>
            <div class="code-name">.bb-icon-office-supplies-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-notice-fill"></span>
            <div class="name">
              notice-fill
            </div>
            <div class="code-name">.bb-icon-notice-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-mute"></span>
            <div class="name">
              mute
            </div>
            <div class="code-name">.bb-icon-mute
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-order-fill"></span>
            <div class="name">
              order-fill
            </div>
            <div class="code-name">.bb-icon-order-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-password1"></span>
            <div class="name">
              password
            </div>
            <div class="code-name">.bb-icon-password1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-map1"></span>
            <div class="name">
              map
            </div>
            <div class="code-name">.bb-icon-map1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-paylater-fill"></span>
            <div class="name">
              paylater-fill
            </div>
            <div class="code-name">.bb-icon-paylater-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-phone-fill"></span>
            <div class="name">
              phone-fill
            </div>
            <div class="code-name">.bb-icon-phone-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-online-tracking-fill"></span>
            <div class="name">
              online-tracking-fill
            </div>
            <div class="code-name">.bb-icon-online-tracking-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-play-fill1"></span>
            <div class="name">
              play-fill
            </div>
            <div class="code-name">.bb-icon-play-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-pdf-fill"></span>
            <div class="name">
              pdf-fill
            </div>
            <div class="code-name">.bb-icon-pdf-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-phone1"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.bb-icon-phone1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-pin-fill"></span>
            <div class="name">
              pin-fill
            </div>
            <div class="code-name">.bb-icon-pin-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-product-fill"></span>
            <div class="name">
              product-fill
            </div>
            <div class="code-name">.bb-icon-product-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-rankinglist-fill"></span>
            <div class="name">
              ranking list-fill
            </div>
            <div class="code-name">.bb-icon-rankinglist-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-reduce-fill"></span>
            <div class="name">
              reduce-fill
            </div>
            <div class="code-name">.bb-icon-reduce-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-reeor-fill"></span>
            <div class="name">
              reeor-fill
            </div>
            <div class="code-name">.bb-icon-reeor-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-pic-fill1"></span>
            <div class="name">
              pic-fill
            </div>
            <div class="code-name">.bb-icon-pic-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-rankinglist"></span>
            <div class="name">
              ranking list
            </div>
            <div class="code-name">.bb-icon-rankinglist
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-product1"></span>
            <div class="name">
              product
            </div>
            <div class="code-name">.bb-icon-product1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-prompt-fill1"></span>
            <div class="name">
              prompt-fill
            </div>
            <div class="code-name">.bb-icon-prompt-fill1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-resonserate-fill"></span>
            <div class="name">
              resonse rate-fill
            </div>
            <div class="code-name">.bb-icon-resonserate-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-remind-fill"></span>
            <div class="name">
              remind-fill
            </div>
            <div class="code-name">.bb-icon-remind-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Rightbutton-fill"></span>
            <div class="name">
              Right button-fill
            </div>
            <div class="code-name">.bb-icon-Rightbutton-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-RFQ-logo-fill"></span>
            <div class="name">
              RFQ-logo-fill
            </div>
            <div class="code-name">.bb-icon-RFQ-logo-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-RFQ-word-fill"></span>
            <div class="name">
              RFQ-word-fill
            </div>
            <div class="code-name">.bb-icon-RFQ-word-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-searchcart-fill"></span>
            <div class="name">
              search cart-fill
            </div>
            <div class="code-name">.bb-icon-searchcart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-salescenter-fill"></span>
            <div class="name">
              sales center-fill
            </div>
            <div class="code-name">.bb-icon-salescenter-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-save-fill"></span>
            <div class="name">
              save-fill
            </div>
            <div class="code-name">.bb-icon-save-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-security-fill"></span>
            <div class="name">
              security-fill
            </div>
            <div class="code-name">.bb-icon-security-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Similarproducts-fill"></span>
            <div class="name">
              category products-fill
            </div>
            <div class="code-name">.bb-icon-Similarproducts-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-signboard-fill"></span>
            <div class="name">
              signboard-fill
            </div>
            <div class="code-name">.bb-icon-signboard-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-service-fill"></span>
            <div class="name">
              service-fill
            </div>
            <div class="code-name">.bb-icon-service-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-shuffling-banner-fill"></span>
            <div class="name">
              shuffling-banner-fill
            </div>
            <div class="code-name">.bb-icon-shuffling-banner-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-supplier-features-fill"></span>
            <div class="name">
              supplier-features-fill
            </div>
            <div class="code-name">.bb-icon-supplier-features-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-store-fill"></span>
            <div class="name">
              store-fill
            </div>
            <div class="code-name">.bb-icon-store-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-smile-fill"></span>
            <div class="name">
              smile-fill
            </div>
            <div class="code-name">.bb-icon-smile-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-success-fill"></span>
            <div class="name">
              success-fill
            </div>
            <div class="code-name">.bb-icon-success-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-sound-filling-fill"></span>
            <div class="name">
              sound-filling-fill
            </div>
            <div class="code-name">.bb-icon-sound-filling-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-sound-Mute1"></span>
            <div class="name">
              sound-Mute
            </div>
            <div class="code-name">.bb-icon-sound-Mute1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-suspended-fill"></span>
            <div class="name">
              suspended-fill
            </div>
            <div class="code-name">.bb-icon-suspended-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-tool-fill"></span>
            <div class="name">
              tool-fill
            </div>
            <div class="code-name">.bb-icon-tool-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-task-management-fill"></span>
            <div class="name">
              task-management-fill
            </div>
            <div class="code-name">.bb-icon-task-management-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-unlock-fill"></span>
            <div class="name">
              unlock-fill
            </div>
            <div class="code-name">.bb-icon-unlock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-trust-fill"></span>
            <div class="name">
              trust-fill
            </div>
            <div class="code-name">.bb-icon-trust-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-vip-fill"></span>
            <div class="name">
              vip-fill
            </div>
            <div class="code-name">.bb-icon-vip-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-set1"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.bb-icon-set1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Top-fill"></span>
            <div class="name">
              top-fill
            </div>
            <div class="code-name">.bb-icon-Top-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-viewlarger1"></span>
            <div class="name">
              view larger
            </div>
            <div class="code-name">.bb-icon-viewlarger1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-voice-fill"></span>
            <div class="name">
              voice-fill
            </div>
            <div class="code-name">.bb-icon-voice-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-warning-fill"></span>
            <div class="name">
              warning-fill
            </div>
            <div class="code-name">.bb-icon-warning-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-warehouse-fill"></span>
            <div class="name">
              warehouse-fill
            </div>
            <div class="code-name">.bb-icon-warehouse-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-zip-fill"></span>
            <div class="name">
              zip-fill
            </div>
            <div class="code-name">.bb-icon-zip-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-trade-assurance-fill"></span>
            <div class="name">
              trade-assurance-fill
            </div>
            <div class="code-name">.bb-icon-trade-assurance-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-vs-fill"></span>
            <div class="name">
              vs-fill
            </div>
            <div class="code-name">.bb-icon-vs-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-video1"></span>
            <div class="name">
              video
            </div>
            <div class="code-name">.bb-icon-video1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-template-fill"></span>
            <div class="name">
              template-fill
            </div>
            <div class="code-name">.bb-icon-template-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-wallet1"></span>
            <div class="name">
              wallet
            </div>
            <div class="code-name">.bb-icon-wallet1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-training1"></span>
            <div class="name">
              training
            </div>
            <div class="code-name">.bb-icon-training1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-packing-labeling-fill"></span>
            <div class="name">
              packing-labeling-fill
            </div>
            <div class="code-name">.bb-icon-packing-labeling-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Exportservices-fill"></span>
            <div class="name">
              export services-fill
            </div>
            <div class="code-name">.bb-icon-Exportservices-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-brand-fill"></span>
            <div class="name">
              brand-fill
            </div>
            <div class="code-name">.bb-icon-brand-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-collection"></span>
            <div class="name">
              collection
            </div>
            <div class="code-name">.bb-icon-collection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-consumption-fill"></span>
            <div class="name">
              consumption-fill
            </div>
            <div class="code-name">.bb-icon-consumption-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-collection-fill"></span>
            <div class="name">
              collection-fill
            </div>
            <div class="code-name">.bb-icon-collection-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-brand"></span>
            <div class="name">
              brand
            </div>
            <div class="code-name">.bb-icon-brand
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-rejected-order-fill"></span>
            <div class="name">
              rejected-order-fill
            </div>
            <div class="code-name">.bb-icon-rejected-order-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-homepage-ads-fill"></span>
            <div class="name">
              homepage-ads-fill
            </div>
            <div class="code-name">.bb-icon-homepage-ads-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-homepage-ads"></span>
            <div class="name">
              homepage-ads
            </div>
            <div class="code-name">.bb-icon-homepage-ads
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-scenes-fill"></span>
            <div class="name">
              scenes-fill
            </div>
            <div class="code-name">.bb-icon-scenes-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-scenes"></span>
            <div class="name">
              scenes
            </div>
            <div class="code-name">.bb-icon-scenes
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-similar-product-fill"></span>
            <div class="name">
              similar-product-fill
            </div>
            <div class="code-name">.bb-icon-similar-product-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-topraning-fill"></span>
            <div class="name">
              topraning-fill
            </div>
            <div class="code-name">.bb-icon-topraning-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-consumption"></span>
            <div class="name">
              consumption
            </div>
            <div class="code-name">.bb-icon-consumption
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-topraning"></span>
            <div class="name">
              topraning
            </div>
            <div class="code-name">.bb-icon-topraning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-gold-supplier"></span>
            <div class="name">
              gold-supplier
            </div>
            <div class="code-name">.bb-icon-gold-supplier
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-messagecenter-fill"></span>
            <div class="name">
              message center-fill
            </div>
            <div class="code-name">.bb-icon-messagecenter-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-quick"></span>
            <div class="name">
              quick
            </div>
            <div class="code-name">.bb-icon-quick
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-writing"></span>
            <div class="name">
              writing
            </div>
            <div class="code-name">.bb-icon-writing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-docjpge-fill"></span>
            <div class="name">
              doc-fill
            </div>
            <div class="code-name">.bb-icon-docjpge-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-jpge-fill"></span>
            <div class="name">
              jpge-fill
            </div>
            <div class="code-name">.bb-icon-jpge-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-gifjpge-fill"></span>
            <div class="name">
              gif-fill
            </div>
            <div class="code-name">.bb-icon-gifjpge-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-bmpjpge-fill"></span>
            <div class="name">
              bmp-fill
            </div>
            <div class="code-name">.bb-icon-bmpjpge-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-tifjpge-fill"></span>
            <div class="name">
              tif-fill
            </div>
            <div class="code-name">.bb-icon-tifjpge-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-pngjpge-fill"></span>
            <div class="name">
              png-fill
            </div>
            <div class="code-name">.bb-icon-pngjpge-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-Hometextile"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.bb-icon-Hometextile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.bb-icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-sendinquiry-fill"></span>
            <div class="name">
              send inquiry-fill
            </div>
            <div class="code-name">.bb-icon-sendinquiry-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-comments-fill"></span>
            <div class="name">
              comments-fill
            </div>
            <div class="code-name">.bb-icon-comments-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-account-fill"></span>
            <div class="name">
              account-fill
            </div>
            <div class="code-name">.bb-icon-account-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-feed-logo-fill"></span>
            <div class="name">
              feed-logo-fill
            </div>
            <div class="code-name">.bb-icon-feed-logo-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-feed-logo"></span>
            <div class="name">
              feed-logo
            </div>
            <div class="code-name">.bb-icon-feed-logo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-home-fill"></span>
            <div class="name">
              home-fill
            </div>
            <div class="code-name">.bb-icon-home-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-add-select"></span>
            <div class="name">
              add-select
            </div>
            <div class="code-name">.bb-icon-add-select
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-sami-select"></span>
            <div class="name">
              sami-select
            </div>
            <div class="code-name">.bb-icon-sami-select
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">.bb-icon-camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-arrow-down"></span>
            <div class="name">
              arrow-down
            </div>
            <div class="code-name">.bb-icon-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-account"></span>
            <div class="name">
              account
            </div>
            <div class="code-name">.bb-icon-account
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-comments"></span>
            <div class="name">
              comments
            </div>
            <div class="code-name">.bb-icon-comments
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-cart-Empty1"></span>
            <div class="name">
              cart-Empty
            </div>
            <div class="code-name">.bb-icon-cart-Empty1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-favorites"></span>
            <div class="name">
              favorites
            </div>
            <div class="code-name">.bb-icon-favorites
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-order"></span>
            <div class="name">
              order
            </div>
            <div class="code-name">.bb-icon-order
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.bb-icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-trade-assurance"></span>
            <div class="name">
              trade-assurance
            </div>
            <div class="code-name">.bb-icon-trade-assurance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-usercenter1"></span>
            <div class="name">
              user center
            </div>
            <div class="code-name">.bb-icon-usercenter1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon bbfont bb-icon-tradingdata"></span>
            <div class="name">
              trading data
            </div>
            <div class="code-name">.bb-icon-tradingdata
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="bbfont bb-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            bbfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-history"></use>
                </svg>
                <div class="name">history</div>
                <div class="code-name">#bb-icon-history</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-editor"></use>
                </svg>
                <div class="name">editor</div>
                <div class="code-name">#bb-icon-editor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-data"></use>
                </svg>
                <div class="name">data</div>
                <div class="code-name">#bb-icon-data</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-gift"></use>
                </svg>
                <div class="name">gift</div>
                <div class="code-name">#bb-icon-gift</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-integral"></use>
                </svg>
                <div class="name">integral</div>
                <div class="code-name">#bb-icon-integral</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-nav-list"></use>
                </svg>
                <div class="name">nav-list</div>
                <div class="code-name">#bb-icon-nav-list</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-pic"></use>
                </svg>
                <div class="name">pic</div>
                <div class="code-name">#bb-icon-pic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Notvisible"></use>
                </svg>
                <div class="name">Not visible</div>
                <div class="code-name">#bb-icon-Notvisible</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-play"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#bb-icon-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-rising"></use>
                </svg>
                <div class="name">rising</div>
                <div class="code-name">#bb-icon-rising</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-QRcode"></use>
                </svg>
                <div class="name">QRcode</div>
                <div class="code-name">#bb-icon-QRcode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-rmb"></use>
                </svg>
                <div class="name">rmb</div>
                <div class="code-name">#bb-icon-rmb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-similar-product"></use>
                </svg>
                <div class="name">similar-product</div>
                <div class="code-name">#bb-icon-similar-product</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Exportservices"></use>
                </svg>
                <div class="name">export services</div>
                <div class="code-name">#bb-icon-Exportservices</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-sendinquiry"></use>
                </svg>
                <div class="name">send inquiry</div>
                <div class="code-name">#bb-icon-sendinquiry</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-all-fill"></use>
                </svg>
                <div class="name">all-fill</div>
                <div class="code-name">#bb-icon-all-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-favorites-fill"></use>
                </svg>
                <div class="name">favorites-fill</div>
                <div class="code-name">#bb-icon-favorites-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-integral-fill"></use>
                </svg>
                <div class="name">integral-fill</div>
                <div class="code-name">#bb-icon-integral-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-namecard-fill"></use>
                </svg>
                <div class="name">namecard-fill</div>
                <div class="code-name">#bb-icon-namecard-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-pic-fill"></use>
                </svg>
                <div class="name">pic-fill</div>
                <div class="code-name">#bb-icon-pic-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-play-fill"></use>
                </svg>
                <div class="name">play-fill</div>
                <div class="code-name">#bb-icon-play-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-prompt-fill"></use>
                </svg>
                <div class="name">prompt-fill</div>
                <div class="code-name">#bb-icon-prompt-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-stop-fill"></use>
                </svg>
                <div class="name">stop-fill</div>
                <div class="code-name">#bb-icon-stop-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-column"></use>
                </svg>
                <div class="name">3column</div>
                <div class="code-name">#bb-icon-column</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-add-account"></use>
                </svg>
                <div class="name">add-account</div>
                <div class="code-name">#bb-icon-add-account</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-column1"></use>
                </svg>
                <div class="name">4column</div>
                <div class="code-name">#bb-icon-column1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#bb-icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-agriculture"></use>
                </svg>
                <div class="name">agriculture</div>
                <div class="code-name">#bb-icon-agriculture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-years"></use>
                </svg>
                <div class="name">2years</div>
                <div class="code-name">#bb-icon-years</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-add-cart"></use>
                </svg>
                <div class="name">add-cart</div>
                <div class="code-name">#bb-icon-add-cart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-arrow-right"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#bb-icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-arrow-lift"></use>
                </svg>
                <div class="name">arrow-lift</div>
                <div class="code-name">#bb-icon-arrow-lift</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-apparel"></use>
                </svg>
                <div class="name">apparel</div>
                <div class="code-name">#bb-icon-apparel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-all"></use>
                </svg>
                <div class="name">all</div>
                <div class="code-name">#bb-icon-all</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-arrow-up"></use>
                </svg>
                <div class="name">arrow-up</div>
                <div class="code-name">#bb-icon-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-ascending"></use>
                </svg>
                <div class="name">ascending</div>
                <div class="code-name">#bb-icon-ascending</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-ashbin"></use>
                </svg>
                <div class="name">ashbin</div>
                <div class="code-name">#bb-icon-ashbin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-atm"></use>
                </svg>
                <div class="name">atm</div>
                <div class="code-name">#bb-icon-atm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-bad"></use>
                </svg>
                <div class="name">bad</div>
                <div class="code-name">#bb-icon-bad</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-attachent"></use>
                </svg>
                <div class="name">attachent</div>
                <div class="code-name">#bb-icon-attachent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-browse"></use>
                </svg>
                <div class="name">browse</div>
                <div class="code-name">#bb-icon-browse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-beauty"></use>
                </svg>
                <div class="name">beauty</div>
                <div class="code-name">#bb-icon-beauty</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-atm-away"></use>
                </svg>
                <div class="name">atm-away</div>
                <div class="code-name">#bb-icon-atm-away</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-assessed-badge"></use>
                </svg>
                <div class="name">assessed-badge</div>
                <div class="code-name">#bb-icon-assessed-badge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-auto"></use>
                </svg>
                <div class="name">auto</div>
                <div class="code-name">#bb-icon-auto</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-bags"></use>
                </svg>
                <div class="name">bags</div>
                <div class="code-name">#bb-icon-bags</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-calendar"></use>
                </svg>
                <div class="name">calendar</div>
                <div class="code-name">#bb-icon-calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cart-full"></use>
                </svg>
                <div class="name">cart- full</div>
                <div class="code-name">#bb-icon-cart-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-calculator"></use>
                </svg>
                <div class="name">calculator</div>
                <div class="code-name">#bb-icon-calculator</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cameraswitching"></use>
                </svg>
                <div class="name">camera switching</div>
                <div class="code-name">#bb-icon-cameraswitching</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cecurity-protection"></use>
                </svg>
                <div class="name">cecurity-protection</div>
                <div class="code-name">#bb-icon-cecurity-protection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-category"></use>
                </svg>
                <div class="name">category</div>
                <div class="code-name">#bb-icon-category</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#bb-icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-certified-supplier"></use>
                </svg>
                <div class="name">certified-supplier</div>
                <div class="code-name">#bb-icon-certified-supplier</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cart-Empty"></use>
                </svg>
                <div class="name">cart-Empty</div>
                <div class="code-name">#bb-icon-cart-Empty</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-code"></use>
                </svg>
                <div class="name">code</div>
                <div class="code-name">#bb-icon-code</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-color"></use>
                </svg>
                <div class="name">color</div>
                <div class="code-name">#bb-icon-color</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-conditions"></use>
                </svg>
                <div class="name">conditions</div>
                <div class="code-name">#bb-icon-conditions</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-confirm"></use>
                </svg>
                <div class="name">confirm</div>
                <div class="code-name">#bb-icon-confirm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-company"></use>
                </svg>
                <div class="name">company</div>
                <div class="code-name">#bb-icon-company</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-ali-clould"></use>
                </svg>
                <div class="name">ali-clould</div>
                <div class="code-name">#bb-icon-ali-clould</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-copy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#bb-icon-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-credit-level"></use>
                </svg>
                <div class="name">credit-level</div>
                <div class="code-name">#bb-icon-credit-level</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-coupons"></use>
                </svg>
                <div class="name">coupons</div>
                <div class="code-name">#bb-icon-coupons</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-connections"></use>
                </svg>
                <div class="name">connections</div>
                <div class="code-name">#bb-icon-connections</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cry"></use>
                </svg>
                <div class="name">cry</div>
                <div class="code-name">#bb-icon-cry</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-costoms-alearance"></use>
                </svg>
                <div class="name">costoms-alearance</div>
                <div class="code-name">#bb-icon-costoms-alearance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#bb-icon-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-CurrencyConverter"></use>
                </svg>
                <div class="name">Currency Converter</div>
                <div class="code-name">#bb-icon-CurrencyConverter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cut"></use>
                </svg>
                <div class="name">cut</div>
                <div class="code-name">#bb-icon-cut</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-data1"></use>
                </svg>
                <div class="name">data</div>
                <div class="code-name">#bb-icon-data1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Customermanagement"></use>
                </svg>
                <div class="name">Customer management</div>
                <div class="code-name">#bb-icon-Customermanagement</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-descending"></use>
                </svg>
                <div class="name">descending</div>
                <div class="code-name">#bb-icon-descending</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-double-arro-right"></use>
                </svg>
                <div class="name">double-arro- right</div>
                <div class="code-name">#bb-icon-double-arro-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-customization"></use>
                </svg>
                <div class="name">customization</div>
                <div class="code-name">#bb-icon-customization</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-double-arrow-left"></use>
                </svg>
                <div class="name">double-arrow-left</div>
                <div class="code-name">#bb-icon-double-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-discount"></use>
                </svg>
                <div class="name">discount</div>
                <div class="code-name">#bb-icon-discount</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#bb-icon-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-dollar"></use>
                </svg>
                <div class="name">dollar</div>
                <div class="code-name">#bb-icon-dollar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-default-template"></use>
                </svg>
                <div class="name">default-template</div>
                <div class="code-name">#bb-icon-default-template</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-editor1"></use>
                </svg>
                <div class="name">editor</div>
                <div class="code-name">#bb-icon-editor1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-eletrical"></use>
                </svg>
                <div class="name">eletrical</div>
                <div class="code-name">#bb-icon-eletrical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-electronics"></use>
                </svg>
                <div class="name">electronics</div>
                <div class="code-name">#bb-icon-electronics</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-etrical-equipm"></use>
                </svg>
                <div class="name">etrical-equipm</div>
                <div class="code-name">#bb-icon-etrical-equipm</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-ellipsis"></use>
                </svg>
                <div class="name">ellipsis</div>
                <div class="code-name">#bb-icon-ellipsis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-email"></use>
                </svg>
                <div class="name">email</div>
                <div class="code-name">#bb-icon-email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-falling"></use>
                </svg>
                <div class="name">falling</div>
                <div class="code-name">#bb-icon-falling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-earth"></use>
                </svg>
                <div class="name">earth</div>
                <div class="code-name">#bb-icon-earth</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-filter"></use>
                </svg>
                <div class="name">filter</div>
                <div class="code-name">#bb-icon-filter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-furniture"></use>
                </svg>
                <div class="name">furniture</div>
                <div class="code-name">#bb-icon-furniture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-folder"></use>
                </svg>
                <div class="name">folder</div>
                <div class="code-name">#bb-icon-folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-feeds"></use>
                </svg>
                <div class="name">feeds</div>
                <div class="code-name">#bb-icon-feeds</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-history1"></use>
                </svg>
                <div class="name">history</div>
                <div class="code-name">#bb-icon-history1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-hardware"></use>
                </svg>
                <div class="name">hardware</div>
                <div class="code-name">#bb-icon-hardware</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-help"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#bb-icon-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-good"></use>
                </svg>
                <div class="name">good</div>
                <div class="code-name">#bb-icon-good</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Householdappliances"></use>
                </svg>
                <div class="name">Household appliances</div>
                <div class="code-name">#bb-icon-Householdappliances</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-gift1"></use>
                </svg>
                <div class="name">gift</div>
                <div class="code-name">#bb-icon-gift1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-form"></use>
                </svg>
                <div class="name">form</div>
                <div class="code-name">#bb-icon-form</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-image-text"></use>
                </svg>
                <div class="name">image-text</div>
                <div class="code-name">#bb-icon-image-text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-hot"></use>
                </svg>
                <div class="name">hot</div>
                <div class="code-name">#bb-icon-hot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-inspection"></use>
                </svg>
                <div class="name">inspection</div>
                <div class="code-name">#bb-icon-inspection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-leftbutton"></use>
                </svg>
                <div class="name">left button</div>
                <div class="code-name">#bb-icon-leftbutton</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-jewelry"></use>
                </svg>
                <div class="name">jewelry</div>
                <div class="code-name">#bb-icon-jewelry</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-ipad"></use>
                </svg>
                <div class="name">ipad</div>
                <div class="code-name">#bb-icon-ipad</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-leftarrow"></use>
                </svg>
                <div class="name">left arrow</div>
                <div class="code-name">#bb-icon-leftarrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-integral1"></use>
                </svg>
                <div class="name">integral</div>
                <div class="code-name">#bb-icon-integral1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-kitchen"></use>
                </svg>
                <div class="name">kitchen</div>
                <div class="code-name">#bb-icon-kitchen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-inquiry-template"></use>
                </svg>
                <div class="name">inquiry-template</div>
                <div class="code-name">#bb-icon-inquiry-template</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#bb-icon-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-libra"></use>
                </svg>
                <div class="name">libra</div>
                <div class="code-name">#bb-icon-libra</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-loading"></use>
                </svg>
                <div class="name">loading</div>
                <div class="code-name">#bb-icon-loading</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-listing-content"></use>
                </svg>
                <div class="name">listing-content</div>
                <div class="code-name">#bb-icon-listing-content</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-lights"></use>
                </svg>
                <div class="name">lights</div>
                <div class="code-name">#bb-icon-lights</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-logistics-icon"></use>
                </svg>
                <div class="name">logistics-icon</div>
                <div class="code-name">#bb-icon-logistics-icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-messagecenter"></use>
                </svg>
                <div class="name">message center</div>
                <div class="code-name">#bb-icon-messagecenter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-mobile-phone"></use>
                </svg>
                <div class="name">mobile-phone</div>
                <div class="code-name">#bb-icon-mobile-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-manage-order"></use>
                </svg>
                <div class="name">manage-order</div>
                <div class="code-name">#bb-icon-manage-order</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-move"></use>
                </svg>
                <div class="name">move</div>
                <div class="code-name">#bb-icon-move</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Moneymanagement"></use>
                </svg>
                <div class="name">Money management</div>
                <div class="code-name">#bb-icon-Moneymanagement</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-namecard"></use>
                </svg>
                <div class="name">namecard</div>
                <div class="code-name">#bb-icon-namecard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-map"></use>
                </svg>
                <div class="name">map</div>
                <div class="code-name">#bb-icon-map</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Newuserzone"></use>
                </svg>
                <div class="name">New user zone</div>
                <div class="code-name">#bb-icon-Newuserzone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-multi-language"></use>
                </svg>
                <div class="name">multi-language</div>
                <div class="code-name">#bb-icon-multi-language</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-office"></use>
                </svg>
                <div class="name">office</div>
                <div class="code-name">#bb-icon-office</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-notice"></use>
                </svg>
                <div class="name">notice</div>
                <div class="code-name">#bb-icon-notice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-ontimeshipment"></use>
                </svg>
                <div class="name">on time shipment</div>
                <div class="code-name">#bb-icon-ontimeshipment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-office-supplies"></use>
                </svg>
                <div class="name">office-supplies</div>
                <div class="code-name">#bb-icon-office-supplies</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-password"></use>
                </svg>
                <div class="name">password</div>
                <div class="code-name">#bb-icon-password</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Notvisible1"></use>
                </svg>
                <div class="name">Not visible</div>
                <div class="code-name">#bb-icon-Notvisible1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-operation"></use>
                </svg>
                <div class="name">operation</div>
                <div class="code-name">#bb-icon-operation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-packaging"></use>
                </svg>
                <div class="name">packaging</div>
                <div class="code-name">#bb-icon-packaging</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-online-tracking"></use>
                </svg>
                <div class="name">online-tracking</div>
                <div class="code-name">#bb-icon-online-tracking</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-packing-labeling"></use>
                </svg>
                <div class="name">packing-labeling</div>
                <div class="code-name">#bb-icon-packing-labeling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#bb-icon-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-pic1"></use>
                </svg>
                <div class="name">pic</div>
                <div class="code-name">#bb-icon-pic1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-pin"></use>
                </svg>
                <div class="name">pin</div>
                <div class="code-name">#bb-icon-pin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-play1"></use>
                </svg>
                <div class="name">play</div>
                <div class="code-name">#bb-icon-play1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-logistic-logo"></use>
                </svg>
                <div class="name">logistic-logo</div>
                <div class="code-name">#bb-icon-logistic-logo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-print"></use>
                </svg>
                <div class="name">print</div>
                <div class="code-name">#bb-icon-print</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-product"></use>
                </svg>
                <div class="name">product</div>
                <div class="code-name">#bb-icon-product</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-machinery"></use>
                </svg>
                <div class="name">machinery</div>
                <div class="code-name">#bb-icon-machinery</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-process"></use>
                </svg>
                <div class="name">process</div>
                <div class="code-name">#bb-icon-process</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-prompt"></use>
                </svg>
                <div class="name">prompt</div>
                <div class="code-name">#bb-icon-prompt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-QRcode1"></use>
                </svg>
                <div class="name">QRcode</div>
                <div class="code-name">#bb-icon-QRcode1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-reeor"></use>
                </svg>
                <div class="name">reeor</div>
                <div class="code-name">#bb-icon-reeor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-reduce"></use>
                </svg>
                <div class="name">reduce</div>
                <div class="code-name">#bb-icon-reduce</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Non-staplefood"></use>
                </svg>
                <div class="name">Non-staple food</div>
                <div class="code-name">#bb-icon-Non-staplefood</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-rejected-order"></use>
                </svg>
                <div class="name">rejected-order</div>
                <div class="code-name">#bb-icon-rejected-order</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-resonserate"></use>
                </svg>
                <div class="name">resonse rate</div>
                <div class="code-name">#bb-icon-resonserate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-remind"></use>
                </svg>
                <div class="name">remind</div>
                <div class="code-name">#bb-icon-remind</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-responsetime"></use>
                </svg>
                <div class="name">response time</div>
                <div class="code-name">#bb-icon-responsetime</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-return"></use>
                </svg>
                <div class="name">return</div>
                <div class="code-name">#bb-icon-return</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-paylater"></use>
                </svg>
                <div class="name">paylater</div>
                <div class="code-name">#bb-icon-paylater</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-rising1"></use>
                </svg>
                <div class="name">rising</div>
                <div class="code-name">#bb-icon-rising1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Rightarrow"></use>
                </svg>
                <div class="name">Right arrow</div>
                <div class="code-name">#bb-icon-Rightarrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-rmb1"></use>
                </svg>
                <div class="name">rmb</div>
                <div class="code-name">#bb-icon-rmb1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-RFQ-logo"></use>
                </svg>
                <div class="name">RFQ-logo</div>
                <div class="code-name">#bb-icon-RFQ-logo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-save"></use>
                </svg>
                <div class="name">save</div>
                <div class="code-name">#bb-icon-save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-scanning"></use>
                </svg>
                <div class="name">scanning</div>
                <div class="code-name">#bb-icon-scanning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-security"></use>
                </svg>
                <div class="name">security</div>
                <div class="code-name">#bb-icon-security</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-salescenter"></use>
                </svg>
                <div class="name">sales center</div>
                <div class="code-name">#bb-icon-salescenter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-seleted"></use>
                </svg>
                <div class="name">seleted</div>
                <div class="code-name">#bb-icon-seleted</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-searchcart"></use>
                </svg>
                <div class="name">search cart</div>
                <div class="code-name">#bb-icon-searchcart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-raw"></use>
                </svg>
                <div class="name">raw</div>
                <div class="code-name">#bb-icon-raw</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-service"></use>
                </svg>
                <div class="name">service</div>
                <div class="code-name">#bb-icon-service</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#bb-icon-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-signboard"></use>
                </svg>
                <div class="name">signboard</div>
                <div class="code-name">#bb-icon-signboard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-shuffling-banner"></use>
                </svg>
                <div class="name">shuffling-banner</div>
                <div class="code-name">#bb-icon-shuffling-banner</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Rightbutton"></use>
                </svg>
                <div class="name">Right button</div>
                <div class="code-name">#bb-icon-Rightbutton</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-sorting"></use>
                </svg>
                <div class="name">sorting</div>
                <div class="code-name">#bb-icon-sorting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-sound-Mute"></use>
                </svg>
                <div class="name">sound-Mute</div>
                <div class="code-name">#bb-icon-sound-Mute</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Similarproducts"></use>
                </svg>
                <div class="name">category products</div>
                <div class="code-name">#bb-icon-Similarproducts</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-sound-filling"></use>
                </svg>
                <div class="name">sound-filling</div>
                <div class="code-name">#bb-icon-sound-filling</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-suggest"></use>
                </svg>
                <div class="name">suggest</div>
                <div class="code-name">#bb-icon-suggest</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-stop"></use>
                </svg>
                <div class="name">stop</div>
                <div class="code-name">#bb-icon-stop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-success"></use>
                </svg>
                <div class="name">success</div>
                <div class="code-name">#bb-icon-success</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-supplier-features"></use>
                </svg>
                <div class="name">supplier-features</div>
                <div class="code-name">#bb-icon-supplier-features</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-switch"></use>
                </svg>
                <div class="name">switch</div>
                <div class="code-name">#bb-icon-switch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-survey"></use>
                </svg>
                <div class="name">survey</div>
                <div class="code-name">#bb-icon-survey</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-template"></use>
                </svg>
                <div class="name">template</div>
                <div class="code-name">#bb-icon-template</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-text"></use>
                </svg>
                <div class="name">text</div>
                <div class="code-name">#bb-icon-text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-suspended"></use>
                </svg>
                <div class="name">suspended</div>
                <div class="code-name">#bb-icon-suspended</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-task-management"></use>
                </svg>
                <div class="name">task-management</div>
                <div class="code-name">#bb-icon-task-management</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-tool"></use>
                </svg>
                <div class="name">tool</div>
                <div class="code-name">#bb-icon-tool</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Top"></use>
                </svg>
                <div class="name">top</div>
                <div class="code-name">#bb-icon-Top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-smile"></use>
                </svg>
                <div class="name">smile</div>
                <div class="code-name">#bb-icon-smile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-textile-products"></use>
                </svg>
                <div class="name">textile-products</div>
                <div class="code-name">#bb-icon-textile-products</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-tradealert"></use>
                </svg>
                <div class="name">trade alert</div>
                <div class="code-name">#bb-icon-tradealert</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-topsales"></use>
                </svg>
                <div class="name">top sales</div>
                <div class="code-name">#bb-icon-topsales</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-tradingvolume"></use>
                </svg>
                <div class="name">trading volume</div>
                <div class="code-name">#bb-icon-tradingvolume</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-training"></use>
                </svg>
                <div class="name">training</div>
                <div class="code-name">#bb-icon-training</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-upload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#bb-icon-upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-RFQ-word"></use>
                </svg>
                <div class="name">RFQ-word</div>
                <div class="code-name">#bb-icon-RFQ-word</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-viewlarger"></use>
                </svg>
                <div class="name">view larger</div>
                <div class="code-name">#bb-icon-viewlarger</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-viewgallery"></use>
                </svg>
                <div class="name">viewgallery</div>
                <div class="code-name">#bb-icon-viewgallery</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-vehivles"></use>
                </svg>
                <div class="name">vehivles</div>
                <div class="code-name">#bb-icon-vehivles</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-trust"></use>
                </svg>
                <div class="name">trust</div>
                <div class="code-name">#bb-icon-trust</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-warning"></use>
                </svg>
                <div class="name">warning</div>
                <div class="code-name">#bb-icon-warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-warehouse"></use>
                </svg>
                <div class="name">warehouse</div>
                <div class="code-name">#bb-icon-warehouse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-shoes"></use>
                </svg>
                <div class="name">shoes</div>
                <div class="code-name">#bb-icon-shoes</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-video"></use>
                </svg>
                <div class="name">video</div>
                <div class="code-name">#bb-icon-video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-viewlist"></use>
                </svg>
                <div class="name">viewlist</div>
                <div class="code-name">#bb-icon-viewlist</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-set"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#bb-icon-set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-store"></use>
                </svg>
                <div class="name">store</div>
                <div class="code-name">#bb-icon-store</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-tool-hardware"></use>
                </svg>
                <div class="name">tool-hardware</div>
                <div class="code-name">#bb-icon-tool-hardware</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-vs"></use>
                </svg>
                <div class="name">vs</div>
                <div class="code-name">#bb-icon-vs</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-toy"></use>
                </svg>
                <div class="name">toy</div>
                <div class="code-name">#bb-icon-toy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-sport"></use>
                </svg>
                <div class="name">sport</div>
                <div class="code-name">#bb-icon-sport</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-creditcard"></use>
                </svg>
                <div class="name">credit card</div>
                <div class="code-name">#bb-icon-creditcard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-contacts"></use>
                </svg>
                <div class="name">contacts</div>
                <div class="code-name">#bb-icon-contacts</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-checkstand"></use>
                </svg>
                <div class="name">checkstand</div>
                <div class="code-name">#bb-icon-checkstand</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-aviation"></use>
                </svg>
                <div class="name">aviation</div>
                <div class="code-name">#bb-icon-aviation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Daytimemode"></use>
                </svg>
                <div class="name">Daytime mode</div>
                <div class="code-name">#bb-icon-Daytimemode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-infantmom"></use>
                </svg>
                <div class="name">infant & mom</div>
                <div class="code-name">#bb-icon-infantmom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-discounts"></use>
                </svg>
                <div class="name">discounts</div>
                <div class="code-name">#bb-icon-discounts</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-invoice"></use>
                </svg>
                <div class="name">invoice</div>
                <div class="code-name">#bb-icon-invoice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-insurance"></use>
                </svg>
                <div class="name">insurance</div>
                <div class="code-name">#bb-icon-insurance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-nightmode"></use>
                </svg>
                <div class="name">night mode</div>
                <div class="code-name">#bb-icon-nightmode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-usercenter"></use>
                </svg>
                <div class="name">user center</div>
                <div class="code-name">#bb-icon-usercenter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#bb-icon-unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-vip"></use>
                </svg>
                <div class="name">vip</div>
                <div class="code-name">#bb-icon-vip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-wallet"></use>
                </svg>
                <div class="name">wallet</div>
                <div class="code-name">#bb-icon-wallet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-landtransportation"></use>
                </svg>
                <div class="name">land transportation</div>
                <div class="code-name">#bb-icon-landtransportation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-voice"></use>
                </svg>
                <div class="name">voice</div>
                <div class="code-name">#bb-icon-voice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-exchangerate"></use>
                </svg>
                <div class="name">exchange rate</div>
                <div class="code-name">#bb-icon-exchangerate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-contacts-fill"></use>
                </svg>
                <div class="name">contacts-fill</div>
                <div class="code-name">#bb-icon-contacts-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-add-account1"></use>
                </svg>
                <div class="name">add-account</div>
                <div class="code-name">#bb-icon-add-account1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-years-fill"></use>
                </svg>
                <div class="name">2years-fill</div>
                <div class="code-name">#bb-icon-years-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-add-cart-fill"></use>
                </svg>
                <div class="name">add-cart-fill</div>
                <div class="code-name">#bb-icon-add-cart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-add-fill"></use>
                </svg>
                <div class="name">add-fill</div>
                <div class="code-name">#bb-icon-add-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-all-fill1"></use>
                </svg>
                <div class="name">all-fill</div>
                <div class="code-name">#bb-icon-all-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-ashbin-fill"></use>
                </svg>
                <div class="name">ashbin-fill</div>
                <div class="code-name">#bb-icon-ashbin-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-calendar-fill"></use>
                </svg>
                <div class="name">calendar-fill</div>
                <div class="code-name">#bb-icon-calendar-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-bad-fill"></use>
                </svg>
                <div class="name">bad-fill</div>
                <div class="code-name">#bb-icon-bad-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-bussiness-man-fill"></use>
                </svg>
                <div class="name">bussiness-man-fill</div>
                <div class="code-name">#bb-icon-bussiness-man-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-atm-fill"></use>
                </svg>
                <div class="name">atm-fill</div>
                <div class="code-name">#bb-icon-atm-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cart-full-fill"></use>
                </svg>
                <div class="name">cart- full-fill</div>
                <div class="code-name">#bb-icon-cart-full-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cart-Empty-fill"></use>
                </svg>
                <div class="name">cart-Empty-fill</div>
                <div class="code-name">#bb-icon-cart-Empty-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cameraswitching-fill"></use>
                </svg>
                <div class="name">camera switching-fill</div>
                <div class="code-name">#bb-icon-cameraswitching-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-atm-away-fill"></use>
                </svg>
                <div class="name">atm-away-fill</div>
                <div class="code-name">#bb-icon-atm-away-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-certified-supplier-fill"></use>
                </svg>
                <div class="name">certified-supplier-fill</div>
                <div class="code-name">#bb-icon-certified-supplier-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-calculator-fill"></use>
                </svg>
                <div class="name">calculator-fill</div>
                <div class="code-name">#bb-icon-calculator-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-clock-fill"></use>
                </svg>
                <div class="name">clock-fill</div>
                <div class="code-name">#bb-icon-clock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-ali-clould-fill"></use>
                </svg>
                <div class="name">ali-clould-fill</div>
                <div class="code-name">#bb-icon-ali-clould-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-color-fill"></use>
                </svg>
                <div class="name">color-fill</div>
                <div class="code-name">#bb-icon-color-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-coupons-fill"></use>
                </svg>
                <div class="name">coupons-fill</div>
                <div class="code-name">#bb-icon-coupons-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cecurity-protection-fill"></use>
                </svg>
                <div class="name">cecurity-protection-fill</div>
                <div class="code-name">#bb-icon-cecurity-protection-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-credit-level-fill"></use>
                </svg>
                <div class="name">credit-level-fill</div>
                <div class="code-name">#bb-icon-credit-level-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-default-template-fill"></use>
                </svg>
                <div class="name">default-template-fill</div>
                <div class="code-name">#bb-icon-default-template-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-CurrencyConverter-fill"></use>
                </svg>
                <div class="name">Currency Converter-fill</div>
                <div class="code-name">#bb-icon-CurrencyConverter-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Customermanagement-fill"></use>
                </svg>
                <div class="name">Customer management-fill</div>
                <div class="code-name">#bb-icon-Customermanagement-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-discounts-fill"></use>
                </svg>
                <div class="name">discounts-fill</div>
                <div class="code-name">#bb-icon-discounts-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Daytimemode-fill"></use>
                </svg>
                <div class="name">Daytime mode-fill</div>
                <div class="code-name">#bb-icon-Daytimemode-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-exl-fill"></use>
                </svg>
                <div class="name">exl-fill</div>
                <div class="code-name">#bb-icon-exl-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cry-fill"></use>
                </svg>
                <div class="name">cry-fill</div>
                <div class="code-name">#bb-icon-cry-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-email-fill"></use>
                </svg>
                <div class="name">email-fill</div>
                <div class="code-name">#bb-icon-email-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-filter-fill"></use>
                </svg>
                <div class="name">filter-fill</div>
                <div class="code-name">#bb-icon-filter-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-folder-fill"></use>
                </svg>
                <div class="name">folder-fill</div>
                <div class="code-name">#bb-icon-folder-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-feeds-fill"></use>
                </svg>
                <div class="name">feeds-fill</div>
                <div class="code-name">#bb-icon-feeds-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-gold-supplie-fill"></use>
                </svg>
                <div class="name">gold-supplie-fill</div>
                <div class="code-name">#bb-icon-gold-supplie-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-form-fill"></use>
                </svg>
                <div class="name">form-fill</div>
                <div class="code-name">#bb-icon-form-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-camera-fill"></use>
                </svg>
                <div class="name">camera-fill</div>
                <div class="code-name">#bb-icon-camera-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-good-fill"></use>
                </svg>
                <div class="name">good-fill</div>
                <div class="code-name">#bb-icon-good-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-image-text-fill"></use>
                </svg>
                <div class="name">image-text-fill</div>
                <div class="code-name">#bb-icon-image-text-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-inspection-fill"></use>
                </svg>
                <div class="name">inspection-fill</div>
                <div class="code-name">#bb-icon-inspection-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-hot-fill"></use>
                </svg>
                <div class="name">hot-fill</div>
                <div class="code-name">#bb-icon-hot-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-company-fill"></use>
                </svg>
                <div class="name">company-fill</div>
                <div class="code-name">#bb-icon-company-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-discount-fill"></use>
                </svg>
                <div class="name">discount-fill</div>
                <div class="code-name">#bb-icon-discount-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-insurance-fill"></use>
                </svg>
                <div class="name">insurance-fill</div>
                <div class="code-name">#bb-icon-insurance-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-inquiry-template-fill"></use>
                </svg>
                <div class="name">inquiry-template-fill</div>
                <div class="code-name">#bb-icon-inquiry-template-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-leftbutton-fill"></use>
                </svg>
                <div class="name">left button-fill</div>
                <div class="code-name">#bb-icon-leftbutton-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-integral-fill1"></use>
                </svg>
                <div class="name">integral-fill</div>
                <div class="code-name">#bb-icon-integral-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-help1"></use>
                </svg>
                <div class="name">help</div>
                <div class="code-name">#bb-icon-help1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-listing-content-fill"></use>
                </svg>
                <div class="name">listing-content-fill</div>
                <div class="code-name">#bb-icon-listing-content-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-logistic-logo-fill"></use>
                </svg>
                <div class="name">logistic-logo-fill</div>
                <div class="code-name">#bb-icon-logistic-logo-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Moneymanagement-fill"></use>
                </svg>
                <div class="name">Money management-fill</div>
                <div class="code-name">#bb-icon-Moneymanagement-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-manage-order-fill"></use>
                </svg>
                <div class="name">manage-order-fill</div>
                <div class="code-name">#bb-icon-manage-order-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-multi-language-fill"></use>
                </svg>
                <div class="name">multi-language-fill</div>
                <div class="code-name">#bb-icon-multi-language-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-logistics-icon-fill"></use>
                </svg>
                <div class="name">logistics-icon-fill</div>
                <div class="code-name">#bb-icon-logistics-icon-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Newuserzone-fill"></use>
                </svg>
                <div class="name">New user zone-fill</div>
                <div class="code-name">#bb-icon-Newuserzone-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-nightmode-fill"></use>
                </svg>
                <div class="name">night mode-fill</div>
                <div class="code-name">#bb-icon-nightmode-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-office-supplies-fill"></use>
                </svg>
                <div class="name">office-supplies-fill</div>
                <div class="code-name">#bb-icon-office-supplies-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-notice-fill"></use>
                </svg>
                <div class="name">notice-fill</div>
                <div class="code-name">#bb-icon-notice-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-mute"></use>
                </svg>
                <div class="name">mute</div>
                <div class="code-name">#bb-icon-mute</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-order-fill"></use>
                </svg>
                <div class="name">order-fill</div>
                <div class="code-name">#bb-icon-order-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-password1"></use>
                </svg>
                <div class="name">password</div>
                <div class="code-name">#bb-icon-password1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-map1"></use>
                </svg>
                <div class="name">map</div>
                <div class="code-name">#bb-icon-map1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-paylater-fill"></use>
                </svg>
                <div class="name">paylater-fill</div>
                <div class="code-name">#bb-icon-paylater-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-phone-fill"></use>
                </svg>
                <div class="name">phone-fill</div>
                <div class="code-name">#bb-icon-phone-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-online-tracking-fill"></use>
                </svg>
                <div class="name">online-tracking-fill</div>
                <div class="code-name">#bb-icon-online-tracking-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-play-fill1"></use>
                </svg>
                <div class="name">play-fill</div>
                <div class="code-name">#bb-icon-play-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-pdf-fill"></use>
                </svg>
                <div class="name">pdf-fill</div>
                <div class="code-name">#bb-icon-pdf-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-phone1"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#bb-icon-phone1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-pin-fill"></use>
                </svg>
                <div class="name">pin-fill</div>
                <div class="code-name">#bb-icon-pin-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-product-fill"></use>
                </svg>
                <div class="name">product-fill</div>
                <div class="code-name">#bb-icon-product-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-rankinglist-fill"></use>
                </svg>
                <div class="name">ranking list-fill</div>
                <div class="code-name">#bb-icon-rankinglist-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-reduce-fill"></use>
                </svg>
                <div class="name">reduce-fill</div>
                <div class="code-name">#bb-icon-reduce-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-reeor-fill"></use>
                </svg>
                <div class="name">reeor-fill</div>
                <div class="code-name">#bb-icon-reeor-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-pic-fill1"></use>
                </svg>
                <div class="name">pic-fill</div>
                <div class="code-name">#bb-icon-pic-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-rankinglist"></use>
                </svg>
                <div class="name">ranking list</div>
                <div class="code-name">#bb-icon-rankinglist</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-product1"></use>
                </svg>
                <div class="name">product</div>
                <div class="code-name">#bb-icon-product1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-prompt-fill1"></use>
                </svg>
                <div class="name">prompt-fill</div>
                <div class="code-name">#bb-icon-prompt-fill1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-resonserate-fill"></use>
                </svg>
                <div class="name">resonse rate-fill</div>
                <div class="code-name">#bb-icon-resonserate-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-remind-fill"></use>
                </svg>
                <div class="name">remind-fill</div>
                <div class="code-name">#bb-icon-remind-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Rightbutton-fill"></use>
                </svg>
                <div class="name">Right button-fill</div>
                <div class="code-name">#bb-icon-Rightbutton-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-RFQ-logo-fill"></use>
                </svg>
                <div class="name">RFQ-logo-fill</div>
                <div class="code-name">#bb-icon-RFQ-logo-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-RFQ-word-fill"></use>
                </svg>
                <div class="name">RFQ-word-fill</div>
                <div class="code-name">#bb-icon-RFQ-word-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-searchcart-fill"></use>
                </svg>
                <div class="name">search cart-fill</div>
                <div class="code-name">#bb-icon-searchcart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-salescenter-fill"></use>
                </svg>
                <div class="name">sales center-fill</div>
                <div class="code-name">#bb-icon-salescenter-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-save-fill"></use>
                </svg>
                <div class="name">save-fill</div>
                <div class="code-name">#bb-icon-save-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-security-fill"></use>
                </svg>
                <div class="name">security-fill</div>
                <div class="code-name">#bb-icon-security-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Similarproducts-fill"></use>
                </svg>
                <div class="name">category products-fill</div>
                <div class="code-name">#bb-icon-Similarproducts-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-signboard-fill"></use>
                </svg>
                <div class="name">signboard-fill</div>
                <div class="code-name">#bb-icon-signboard-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-service-fill"></use>
                </svg>
                <div class="name">service-fill</div>
                <div class="code-name">#bb-icon-service-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-shuffling-banner-fill"></use>
                </svg>
                <div class="name">shuffling-banner-fill</div>
                <div class="code-name">#bb-icon-shuffling-banner-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-supplier-features-fill"></use>
                </svg>
                <div class="name">supplier-features-fill</div>
                <div class="code-name">#bb-icon-supplier-features-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-store-fill"></use>
                </svg>
                <div class="name">store-fill</div>
                <div class="code-name">#bb-icon-store-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-smile-fill"></use>
                </svg>
                <div class="name">smile-fill</div>
                <div class="code-name">#bb-icon-smile-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-success-fill"></use>
                </svg>
                <div class="name">success-fill</div>
                <div class="code-name">#bb-icon-success-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-sound-filling-fill"></use>
                </svg>
                <div class="name">sound-filling-fill</div>
                <div class="code-name">#bb-icon-sound-filling-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-sound-Mute1"></use>
                </svg>
                <div class="name">sound-Mute</div>
                <div class="code-name">#bb-icon-sound-Mute1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-suspended-fill"></use>
                </svg>
                <div class="name">suspended-fill</div>
                <div class="code-name">#bb-icon-suspended-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-tool-fill"></use>
                </svg>
                <div class="name">tool-fill</div>
                <div class="code-name">#bb-icon-tool-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-task-management-fill"></use>
                </svg>
                <div class="name">task-management-fill</div>
                <div class="code-name">#bb-icon-task-management-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-unlock-fill"></use>
                </svg>
                <div class="name">unlock-fill</div>
                <div class="code-name">#bb-icon-unlock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-trust-fill"></use>
                </svg>
                <div class="name">trust-fill</div>
                <div class="code-name">#bb-icon-trust-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-vip-fill"></use>
                </svg>
                <div class="name">vip-fill</div>
                <div class="code-name">#bb-icon-vip-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-set1"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#bb-icon-set1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Top-fill"></use>
                </svg>
                <div class="name">top-fill</div>
                <div class="code-name">#bb-icon-Top-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-viewlarger1"></use>
                </svg>
                <div class="name">view larger</div>
                <div class="code-name">#bb-icon-viewlarger1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-voice-fill"></use>
                </svg>
                <div class="name">voice-fill</div>
                <div class="code-name">#bb-icon-voice-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-warning-fill"></use>
                </svg>
                <div class="name">warning-fill</div>
                <div class="code-name">#bb-icon-warning-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-warehouse-fill"></use>
                </svg>
                <div class="name">warehouse-fill</div>
                <div class="code-name">#bb-icon-warehouse-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-zip-fill"></use>
                </svg>
                <div class="name">zip-fill</div>
                <div class="code-name">#bb-icon-zip-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-trade-assurance-fill"></use>
                </svg>
                <div class="name">trade-assurance-fill</div>
                <div class="code-name">#bb-icon-trade-assurance-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-vs-fill"></use>
                </svg>
                <div class="name">vs-fill</div>
                <div class="code-name">#bb-icon-vs-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-video1"></use>
                </svg>
                <div class="name">video</div>
                <div class="code-name">#bb-icon-video1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-template-fill"></use>
                </svg>
                <div class="name">template-fill</div>
                <div class="code-name">#bb-icon-template-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-wallet1"></use>
                </svg>
                <div class="name">wallet</div>
                <div class="code-name">#bb-icon-wallet1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-training1"></use>
                </svg>
                <div class="name">training</div>
                <div class="code-name">#bb-icon-training1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-packing-labeling-fill"></use>
                </svg>
                <div class="name">packing-labeling-fill</div>
                <div class="code-name">#bb-icon-packing-labeling-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Exportservices-fill"></use>
                </svg>
                <div class="name">export services-fill</div>
                <div class="code-name">#bb-icon-Exportservices-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-brand-fill"></use>
                </svg>
                <div class="name">brand-fill</div>
                <div class="code-name">#bb-icon-brand-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-collection"></use>
                </svg>
                <div class="name">collection</div>
                <div class="code-name">#bb-icon-collection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-consumption-fill"></use>
                </svg>
                <div class="name">consumption-fill</div>
                <div class="code-name">#bb-icon-consumption-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-collection-fill"></use>
                </svg>
                <div class="name">collection-fill</div>
                <div class="code-name">#bb-icon-collection-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-brand"></use>
                </svg>
                <div class="name">brand</div>
                <div class="code-name">#bb-icon-brand</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-rejected-order-fill"></use>
                </svg>
                <div class="name">rejected-order-fill</div>
                <div class="code-name">#bb-icon-rejected-order-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-homepage-ads-fill"></use>
                </svg>
                <div class="name">homepage-ads-fill</div>
                <div class="code-name">#bb-icon-homepage-ads-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-homepage-ads"></use>
                </svg>
                <div class="name">homepage-ads</div>
                <div class="code-name">#bb-icon-homepage-ads</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-scenes-fill"></use>
                </svg>
                <div class="name">scenes-fill</div>
                <div class="code-name">#bb-icon-scenes-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-scenes"></use>
                </svg>
                <div class="name">scenes</div>
                <div class="code-name">#bb-icon-scenes</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-similar-product-fill"></use>
                </svg>
                <div class="name">similar-product-fill</div>
                <div class="code-name">#bb-icon-similar-product-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-topraning-fill"></use>
                </svg>
                <div class="name">topraning-fill</div>
                <div class="code-name">#bb-icon-topraning-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-consumption"></use>
                </svg>
                <div class="name">consumption</div>
                <div class="code-name">#bb-icon-consumption</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-topraning"></use>
                </svg>
                <div class="name">topraning</div>
                <div class="code-name">#bb-icon-topraning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-gold-supplier"></use>
                </svg>
                <div class="name">gold-supplier</div>
                <div class="code-name">#bb-icon-gold-supplier</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-messagecenter-fill"></use>
                </svg>
                <div class="name">message center-fill</div>
                <div class="code-name">#bb-icon-messagecenter-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-quick"></use>
                </svg>
                <div class="name">quick</div>
                <div class="code-name">#bb-icon-quick</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-writing"></use>
                </svg>
                <div class="name">writing</div>
                <div class="code-name">#bb-icon-writing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-docjpge-fill"></use>
                </svg>
                <div class="name">doc-fill</div>
                <div class="code-name">#bb-icon-docjpge-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-jpge-fill"></use>
                </svg>
                <div class="name">jpge-fill</div>
                <div class="code-name">#bb-icon-jpge-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-gifjpge-fill"></use>
                </svg>
                <div class="name">gif-fill</div>
                <div class="code-name">#bb-icon-gifjpge-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-bmpjpge-fill"></use>
                </svg>
                <div class="name">bmp-fill</div>
                <div class="code-name">#bb-icon-bmpjpge-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-tifjpge-fill"></use>
                </svg>
                <div class="name">tif-fill</div>
                <div class="code-name">#bb-icon-tifjpge-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-pngjpge-fill"></use>
                </svg>
                <div class="name">png-fill</div>
                <div class="code-name">#bb-icon-pngjpge-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-Hometextile"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#bb-icon-Hometextile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-home"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#bb-icon-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-sendinquiry-fill"></use>
                </svg>
                <div class="name">send inquiry-fill</div>
                <div class="code-name">#bb-icon-sendinquiry-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-comments-fill"></use>
                </svg>
                <div class="name">comments-fill</div>
                <div class="code-name">#bb-icon-comments-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-account-fill"></use>
                </svg>
                <div class="name">account-fill</div>
                <div class="code-name">#bb-icon-account-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-feed-logo-fill"></use>
                </svg>
                <div class="name">feed-logo-fill</div>
                <div class="code-name">#bb-icon-feed-logo-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-feed-logo"></use>
                </svg>
                <div class="name">feed-logo</div>
                <div class="code-name">#bb-icon-feed-logo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-home-fill"></use>
                </svg>
                <div class="name">home-fill</div>
                <div class="code-name">#bb-icon-home-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-add-select"></use>
                </svg>
                <div class="name">add-select</div>
                <div class="code-name">#bb-icon-add-select</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-sami-select"></use>
                </svg>
                <div class="name">sami-select</div>
                <div class="code-name">#bb-icon-sami-select</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-camera"></use>
                </svg>
                <div class="name">camera</div>
                <div class="code-name">#bb-icon-camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-arrow-down"></use>
                </svg>
                <div class="name">arrow-down</div>
                <div class="code-name">#bb-icon-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-account"></use>
                </svg>
                <div class="name">account</div>
                <div class="code-name">#bb-icon-account</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-comments"></use>
                </svg>
                <div class="name">comments</div>
                <div class="code-name">#bb-icon-comments</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-cart-Empty1"></use>
                </svg>
                <div class="name">cart-Empty</div>
                <div class="code-name">#bb-icon-cart-Empty1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-favorites"></use>
                </svg>
                <div class="name">favorites</div>
                <div class="code-name">#bb-icon-favorites</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-order"></use>
                </svg>
                <div class="name">order</div>
                <div class="code-name">#bb-icon-order</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#bb-icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-trade-assurance"></use>
                </svg>
                <div class="name">trade-assurance</div>
                <div class="code-name">#bb-icon-trade-assurance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-usercenter1"></use>
                </svg>
                <div class="name">user center</div>
                <div class="code-name">#bb-icon-usercenter1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#bb-icon-tradingdata"></use>
                </svg>
                <div class="name">trading data</div>
                <div class="code-name">#bb-icon-tradingdata</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
